[Resolved] Change menu breakpoint from 768px to 520px

[Pedro]

Hi,
Is there any way to change de menus breakpoints from 768px to 520px (or other value less than 768px)?

Thanks

[David]

Hi there,

this article explains:

https://docs.generatepress.com/article/mobile-navigation/

[Pedro]

Thanks for your answer, David.

I saw this article before, but it says:

“In the CSS above, simply change 768px to whatever value you like. It’s important to make it higher than 768px, as going lower won’t work“.

I don’t know if it is the last answer for this question. So, is it imposible lo change de breakpoint from 768px to a lower value?

[David]

Sorry my bad – misread your question, currently there is not an easy way to do that as it would require updating all the mobile styles – i will check with Tom if there has been any changes to that.

[Pedro]

Thanks David, please let me know any news!!!

[Tom]

You could try some CSS like this:

@media (min-width: 520px) {
    .main-navigation .menu-toggle,
    .main-navigation .mobile-bar-items,
    .sidebar-nav-mobile:not(#sticky-placeholder) {
        display: none;
    }

    .main-navigation ul,
    .gen-sidebar-nav {
        display: block;
    }
}

[Pedro]

Thanks Tom, it’s a simple solution and works perfect!!!

[Tom]

You’re welcome 🙂

[Author]

Posts