Manually adjusting the nav bar break points


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:

(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)

/* 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;

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).


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:


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