[Resolved] Slideout Navigation – Different Breakpoint

[Sarah Denise]

Hi,

I have my navigation as a menu bar in desktop view and once it reaches the width of 768px, it becomes a slideout navigation. This is working really well.

However, I want it to change to a slideout navigation from 1150px instead.

Thanks,
Sarah

[David]

Hi Sarah, this will help:

https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[Sarah Denise]

Thanks David,

That helped changing the breakpoint.

Now my problem is, the menu-toggle shows on a second line. I tried fixing it by changing the css to:

.main-navigation .menu-toggle,
.main-navigation .mobile-bar-items,
.sidebar-nav-mobile:not(#sticky-placeholder) {
display: block;
float:right;
clear: none;
width: auto;
}

but now it overlaps with the search button on the right inside the div class=mobile-bar-items.

[David]

Hi Sarah, can you provide a link to the site?

[Sarah Denise]

Hi David,

https://resoulchurch.com/au

Thanks

[David]

Hi Denise, try adding position: static; to the extra code you have added

[Sarah Denise]

Awesome! That worked. Thank you.

Do you think this will be updated?
https://docs.generatepress.com/article/mobile-navigation/#initiating-the-mobile-navigation-at-a-different-width

[Author]

Posts