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

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?

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>

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?

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>

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?

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?

You can use this CSS code to prevent wrap

nav {
	flex-wrap: nowrap !important;
}

Thank you!!!