[Resolved] Remove Primary Navigation Sub-Menu’s On Mobile

[Anthany]

Hi Generatepress team, do you have any idea how I could disable primary navigation sub-menus on the mobile version of my website? My website URL is: http://www.scuphed.com.

Thanks, Anthany

[Leo]

Hi Anthany,

The best solution I would recommend is to use the off canvas panel on mobile only:
https://docs.generatepress.com/article/off-canvas-panel-overview/

That way you can create a separate menu and use it on mobile only – we are using the same idea in our site here.

Let me know if this works for you.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthany]

Hi Leo thanks for the reply, the problem is I am already using the off canvas panel on my mobile website. I am using it to hold widgets for users to filter products on my website (it can be seen on category pages below the header search bar).

[Tom]

Are you wanting those sub-menu items to disappear completely, or always appear without needing to activate the dropdown?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Anthany]

Hi Tom, I would like them to be gone completely if possible to simplify my primary navigation on my mobile site.

Thanks, Anthany

[Leo]

Try this CSS:

@media (max-width: 768px) {
    .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle {
        display: none;
    }
    .main-navigation .main-nav ul li.menu-item-has-children>a {
        padding-right: 25px;
    }
}

Adding CSS: https://docs.generatepress.com/article/adding-css/

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Anthany]

Thank you so much Leo, worked perfectly.

[Leo]

No problem 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Author]

Posts