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

[Willya]

Hi, is it possible to make the drop down menu stay open on off canvas menu on mobile & tablet menu?

Please see my website url and click the menu of “2019 Editor Choice”, so I want the drop down of that menu stay open so that visitor dont need top click the arrow to open the drop down menu.

Thanks

[Tom]

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;
}

[Willya]

It works!

Thank you my hero!

[Tom]

Glad I could help 🙂

[Jorge]

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

[David]

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

[Jorge]

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

[David]

No problems – we’re looking into the options – will reply to your topic 🙂

[Simon]

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;
}

[David]

Glad to hear you found this !!!

[Author]

Posts