Streaming live at 10am (PST)

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

2 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