[Support request] Disable Responsive Menus

[Paul]

Hi,

I’d like to disable the responsive toggle menus on tablet and mobile for both the primary and secondary navs.

I found the CSS recommended here but that has no effect – https://generatepress.com/forums/topic/disable-mobile-navigation/

I’m also aware there’s a plugin to disable the mobile features in GP but I only want to change the behaviou of the two menus.

Can you please advise?

Thanks,
Paul.

[Leo]

Hi Paul,

That code should still work. Can you provide a link to your site where it’s not working?

Thanks!

[Paul]

Hi Leo,

http://angry-batfish.w1.poopy.life

Thanks.

[Leo]

Ah it was overwritten. Try this:

@media (max-width: 768px) {
    .menu-toggle {
        display: none !important;
    }
}

Let me know.

[Paul]

Below the 768 breakpoint the primary, secondary nav, and content are not displayed.

[Leo]

The code shouldn’t hide your content.

I’m on my phone right now so can’t check but I seem to remember there was no contents added on desktop either?

[Paul]

I see. It’s the menu’s themselves that are hidden, not the content. I just wanted the menus to not apply the toggle.

[Leo]

So basically you want both menus to show but with the same style on desktop and not in the mobile layout?
Wouldn’t the menu items be squeezed together like that?

[Paul]

Yeah that’s right. I only have two menu items on primary, and three on secondary.

[Tom]

You could do something like this:

@media (max-width:768px) {
    #site-navigation .menu-toggle,
    #site-navigation .mobile-bar-items {
        display: none;
    }

    #site-navigation ul {
        display: block;
    }
    
    #site-navigation .main-nav li {
        float: left;
        clear: none;
    }

    #site-navigation .main-nav ul ul {
        position: absolute;
        top: auto;
        width: 200px;
    }

    #site-navigation .main-nav ul ul ul {
        left: 100%;
        top: 0;
    }

    #site-navigation ul ul .dropdown-menu-toggle:before {
        content: "\f105" !important;
    }
}

[Paul]

Thanks Tom. Secondary menu remains toggled though.

[Leo]

This should help: https://docs.generatepress.com/article/disable-secondary-navigation-mobile-menu/

[Paul]

I would have liked to keep all menu items centered aligned too – primary isn’t on mobile. I’ll need to create a child theme to add custom functions. I don’t have that right now since this is just a sandbox install and I cancelled all hosting packages I had for now. I actually thought this would be done more easily since a Google search shows this was originally requested as early as 2015. Thanks for the suggestions though, if I have time to look into them I will.

[Leo]

You don’t necessarily need a child theme to add that function.

Code Snippets should do: https://docs.generatepress.com/article/adding-php/#code-snippets

[Tom]

This should make your items centered:

@media (max-width:768px) {
    #site-navigation .menu-toggle,
    #site-navigation .mobile-bar-items {
        display: none;
    }

    #site-navigation ul {
        display: block;
    }
    
    #site-navigation .main-nav li {
        float: none;
        display: inline-block !important;
        clear: none;
    }

    #site-navigation .main-nav ul ul {
        position: absolute;
        top: auto;
        width: 200px;
    }

    #site-navigation .main-nav ul ul ul {
        left: 100%;
        top: 0;
    }

    #site-navigation ul ul .dropdown-menu-toggle:before {
        content: "\f105" !important;
    }
}

[Author]

Posts