Restrict hamburger menu to 480px and smaller

[tamdstudio]

Using Integrity, how can I prevent the mobile/hamburger menu from replacing the navbar at sizes above 480?

Many thanks

[ruenel]

Hello There,

Thanks for posting in! If you do not want to display the mobile/hamburger menu and just wanted to display the desktop navbar in smaller screens instead, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

@media (max-width: 979px){
    .masthead-inline .x-btn-navbar {
        display: none;
    }

    .x-nav-wrap.desktop {
        display: block;
    }
}

Just remember that when there are several menu items in your navbar, the menu items might not line up with the logo and that you will have several rows of menu items in your header on smaller screen.

Hope this helps.

[tamdstudio]

Thanks, but that code removes it entirely – at all sizes.

I want the hamburger to appear only at 480px and smaller. The navbar should only appear at 481px and larger.

In other words, how do I lower the mobile menu breakpoint/trigger from 979px to 480px?

Hope this is clearer

[ruenel]

Hello There,

Please update the code and use this instead:

@media (min-width: 481px){
    .masthead-inline .x-btn-navbar {
        display: none;
    }

    .x-nav-wrap.desktop {
        display: block;
    }
}

We would loved to know if this has work for you. Thank you.

[tamdstudio]

It works. Many thanks.

[friech]

We are delighted to assist you with this.

Cheers!