Jump to content

How do I justify navigation links across the width of my site?

Recommended Posts

2 hours ago, Jleebz said:

Site URL: https://www.zendaya.com

I'm looking to emulate the navigation style found here (https://www.zendaya.com), I'd also like to force it for mobile as well. Anyone able to help?

 

Here is a code snippet that did the trick on a 7.1 site. You'll need to turn off the Button, Cart, and Social Links elements of the header. Be aware that if you want the menu items to be on the same line on mobile, you might want to stick to one-line and short navigation titles. Just add this to your website footer code injection. Hope this helps!

<style>
  .header-nav-list {
    display: flex !important;
    justify-content: space-between !important;
  }

  .header-title {
    display: none;
  }

  .header-nav {
    padding-left: 0 !important;
  }

  @media(max-width: 768px) {
    .header-burger {
      display: none;
    }
    .header-nav {
      display: block !important;
      flex-wrap: nowrap;
      justify-content: center;
    }
  }
</style>

 

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment
38 minutes ago, Jleebz said:

Thank you so much for the code! It seems to work perfectly, just one question: Is there a way make it work with the site title?

 Sure! You can change the navigation layout so that the title is on top of the menu (see attached picture) and use this code snippet instead so that the title isn't hidden:

<style>
  .header-nav-list {
    display: flex !important;
    justify-content: space-between !important;
  }

  .header-title-text {
    padding-right: 0 !important;
  }

  .header-nav {
    padding-left: 0 !important;
  }

  @media(max-width: 768px) {
    .header-burger {
      display: none;
    }
    .header-nav {
      display: block !important;
      flex-wrap: nowrap;
      justify-content: center;
    }
  }
</style>

 

Screenshot_81.png

Feel free to email me with any customization inquiries or questions you may have!

Free Squarespace Resources: DevTools Minicourse,  11-Step Guide to Improve Custom CSS, Free Product/Pricing Comparison Table Generator

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.