[Support request] Auto Expand Sub Menus on Mobile Devices Only

[brians]

Have a website that a customer wants to have the sub-menus expanded so it always shows up on mobile devices only.

On desktop devices, it is fine with the little drop-down arrow to the right of the menu item – which will then show the sub items when hovered on. Just need it so when you click the “Menu” icon on mobile, it shows the entire menu at once.

[Tom]

Hi there,

Give this CSS a shot:

.main-navigation.toggled .main-nav ul ul {
    position: relative;
    top: 0;
    left: auto!important;
    right: auto!important;
    width: 100%;
    pointer-events: auto;
    height: auto;
    opacity: 1;
    display: block;
    visibility: visible;
    box-shadow: 0 0 0;
}

.main-navigation.toggled .dropdown-menu-toggle {
    display: none;
}

[Daniel]

Hi Tom,

Is it possible that this solution doesn’t work anymore? Or am I able to implement this with mega-menu?

Thanks!

[Ying]

Hi Daniel,

CSS solution could be very case-dependent. It might not work on your site.

Could you open a new topic and link us to the site in question? Thanks!

[Daniel]

Hi Ying,

Sure, thanks!

For your and all other GP users reference, this topic continues here:
https://generatepress.com/forums/topic/mobile-only-default-sub-menu-expand/

[Ying]

It’s answered in your new topic 🙂

[Author]

Posts