Archived topic
Auto Expand Sub Menus on Mobile Devices Only
5 replies · Started by brians on August 7, 2019
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.
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;
}Hi Tom,
Is it possible that this solution doesn't work anymore? Or am I able to implement this with mega-menu?
Thanks!
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!
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/
It's answered in your new topic :)
