Manually adjusting the nav bar break points

Hello!

I am trying to manually adjust the nav bar break points, but I’m not seeing how to do that in Webflow. I checked out my media queries as to where I could make this change (I think), but I can’t edit it.

Here is a link to loom to show what I am referring to:

Here is my read-only link:
https://preview.webflow.com/preview/ms-partners?utm_source=ms-partners&preview=2706930e0311adaa6e495bff0396157b

(Also, I know this nav is ridiculously long - my client isn’t willing to change it right now. :upside_down_face: )

Any feedback/assistance would be greatly appreciated!

You currently cannot adjust for more than the 4 media queries. On the smaller devices you can adjust the width but for desktop you are doing what you need for testing. I suggest reducing the amount of space between your links, reducing the text, or reducing the amount of links. From a UX standpoint thats a ton of links which isn’t really great for users visiting your site. Other than that, you can also reduce your nav logo or make it a %width of the nav to shrink. Sorry I don’t have better news.

Also, totally unrelated but you have an awesome opportunity to do a grayed out logo grid by gray scaling all your logos, removing the overlap/box look and putting them on white with a color on hover. I love monochrome grayscale logo grids.

1 Like

Thanks @DFink - I appreciate your response.

I’ll see what I can do. I’m going to suggest some changes to the nav bar, but for now the client loves it. :zipper_mouth_face:

That would look so great! I may playaround with it and see if my client will go for it.

In this example the collapse of the menu change to 1300px (Instead of 991px)

<style>
/* menu list desktop - hide on screens less than 1300px width */
@media screen and (max-width: 1300px){
  .w-nav .w-nav-menu {
      display: none;
  }
}

/* hamburger icon - display on screens less than 1300px width */
@media screen and (max-width: 1300px){
  .w-nav .w-nav-button {
      display: block;
  }
}
</style>

Copy - Paste - before body per page -or- for “entire site” (Under setting) - for global navbar

**keep in mind webflow CSS code/class names could change over time (Rare - but could happen).

4 Likes

So awesome!! Thank you @Siton_Systems – I’ll give this a shot!

@Siton_Systems Thank you so much for your code snippet! That worked like a charm!

Great :slight_smile: Mark as solution to close this topic (And for future searches about this topic). Thanks

Hey @Siton_Systems , thank you for the code snippet it works great! Nevertheless, I wanted to ask if there is a way to edit the styling of the menu in the <1280-991px> range without using code? Or is there a code snippet that copies the hamburger menu’s styling for the sub 991px breakpoints? Thank you once again!

Hi. Try this:

image

Hey when I use this code snippet now, my navbar does disappear … but the mobile menu doesn’t show up, any idea why?

Does this code still work? I tried it putting it body in the page and global but doesn’t seem to be working for me.

The burger menu button doesn’t appear though its setting does switch to “block”