Setting custom breakpoints for nav bar

Design help General
1

Hi,

Here is my site Read-Only: Webflow - Cloudscape

Here’s the published site: https://cloudscape.webflow.io/restaurant-owners

On some of the pages of the website in question, the navbar menu has a lot of options and is too wide for some desktop screen sizes, best explained in the screenshot below:

webflow-navbar-1
webflow-navbar-12662×842 265 KB

webflow-navbar-2
webflow-navbar-22272×878 277 KB

I want the hamburger menu to appear at 1280px instead of 991px and have tried this custom CSS:

@media (min-width: 991px) and (max-width: 1280px) { .nav-bar .wrapper.nav-bar-wrapper {max-width: 1280px; } }

However, when publishing the page, there’s no change; the hamburger only appears at 991px.

Any suggestions how to do this?

Thanks.

2

Hello
Greetings

Would be glad to assist you.

Kindly join me on Skype (live:ianradnor088) for further details.

Regards
Ian

3

This CSS should do the trick:

<style>
@media screen and (max-width: 1260px){
.w-nav[data-collapse="medium"] .w-nav-menu {
    display: none;
    }
   .w-nav[data-collapse="medium"] .w-nav-button {
    display: block;
     }
  }
</style>

Project: https://jorns-supercool-project-2f268e.webflow.io/
read-only: https://preview.webflow.com/preview/jorns-supercool-project-2f268e?utm_source=jorns-supercool-project-2f268e&preview=c695b2a1994f7265cb39f70a4468d78a&mode=preview

Hope it helps :grinning:

5 Likes
4

Thanks @jorn - it did do the trick! Built on top of it and it’s now perfect. Appreciate the help!

1 Like
5

Hi there! Old topic, but I wanted to let you know that this helped with my issue similar to the OP! So thank you on that front, but:

Now that I’ve got the hamburger to appear at a custom breakpoint, how do I customize the styling of it? My menu is styled so that it matches my website and is nicer looking, but doing this sort of defaults it to a bare-bones (ugly) version.

Any tips?

6

Hi @BenchPrep

Sorry for the slow response time here.

Is the custom break point still needed after released more breakpoints?
https://webflow.com/feature/design-for-even-larger-screens-with-3-new-breakpoints

If you add a custom breakpoint it’s going to be a bit tricky because all styling needs to be added by code.

7

Hey @jorn, yeah help is still needed as when you try to adjust when the hamburger menu appears, putting it on the option ‘desktop’ affects all of the breakpoints that are considered as desktops, so the hamburger menu appears on scales bigger than 1280px, which is not needed in my case. Thank you for your help so far!