Streaming live at 10am (PST)

Setting custom breakpoints for nav bar

Hi,

Here is my site Read-Only: https://preview.webflow.com/preview/cloudscape?utm_source=cloudscape&preview=fdf86c59c0406686d2beb4906e5b1b35&mode=preview

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:


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.

Hello
Greetings

Would be glad to assist you.

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

Regards
Ian

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:

2 Likes

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

1 Like

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?

Hi @BenchPrep

Sorry for the slow response time here.

Is the custom break point still needed after released more breakpoints?

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