Make the drop down menu stay open on off canvas menu on mobile & tablet only

Hi there,

Give this CSS a shot:

#generate-slideout-menu .slideout-menu li#menu-item-4749 > .sub-menu {
    left: auto;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    display: block;
}

.slideout-navigation #menu-item-4749 .dropdown-menu-toggle {
    display: none;
}

It works!

Thank you my hero!

Glad I could help :)

Thanks Tom, as you always look for a solution for all of us.

I need that submenu be shown expanded but I need to close it if the user wants.

About that snippet, I see that ----li#menu-item-XXXXXXX----- is not an ID but is a class -----li.menu-item-XXXXXXX------
(If I leave # does nothing and if write . works)

Of course I´ve not used the second part that displays none the close icon.

How and I do for showing it expanded and close if needed.

This is the url: https://www.arenamartinez.com

Thanks

Hi Jorge,

i see you have a topic open - all of the current solutions you have found will simply display them as always open. We will look for a JS solution to the issue - and will reply to your open topic here:

https://generatepress.com/forums/topic/sub-nav-open-by-default-for-mobiles/#post-1775565

David, I know it and excuseme. Just I founded it after write here. Excuseme, please.

No problems - we're looking into the options - will reply to your topic :)

Hi Tom, David

As ever, it is brilliant to be able to search a solution and find it's already there! Makes GeneratePress awesome.

Here is the solution that worked for us. Exactly as Tom suggested above, except as Jorge said it just needed a .class rather than #id.

/* Opens About menu by default */
#generate-slideout-menu .slideout-menu li.menu-item-23397 > .sub-menu {
    left: auto;
    opacity: 1;
    pointer-events: auto;
    height: auto;
    overflow: visible;
    display: block;
}
.slideout-navigation .menu-item-23397 .dropdown-menu-toggle {
    display: none;
}

Glad to hear you found this !!!