Streaming live at 10am (PST)

Setting custom breakpoints for nav bar


Here is my site Read-Only:

Here’s the published site:

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?



Would be glad to assist you.

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


This CSS should do the trick:

@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;


Hope it helps :grinning:


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.