Jump to content

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

Recommended Posts

Posted
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

Posted
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

  • 1 year later...
Posted

Hi there! I'm using this same code to hider the header and justify the nav list of a site I'm working on. However, I'm seeing that the nav list is wrapping for some reason? See attached screenshot. Can you help @Caroline_Smith?

Screen Shot 2024-01-03 at 11.03.02 AM.png

Posted
On 1/3/2024 at 11:03 PM, nataliels said:

Hi there! I'm using this same code to hider the header and justify the nav list of a site I'm working on. However, I'm seeing that the nav list is wrapping for some reason? See attached screenshot. Can you help @Caroline_Smith?

Screen Shot 2024-01-03 at 11.03.02 AM.png

You can use this CSS code to prevent wrap

nav {
	flex-wrap: nowrap !important;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

  • 2 weeks later...

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.