[Resolved] Off Canvas Menu

[Robert]

Hi,
I am using the Off Canvas for Mobile option.

Is it possible to have the sub items in the menu nav items showing immediately rather than having to click on an arrow to get them to open?

When using a mobile the arrow is easy to miss and then you open the primary menu page rather than going directly to the desired sub item page.

Thanks,
Rob

[Robert]

I think I have found an answer from a previous request. I didnt really know what the terms were for what I was trying to do but Leo has posted this in the answer to:

Support › Expand submenu on mobile while on subpage

July 10, 2017 at 4:27 am

@media (max-width: 768px) {
.main-navigation .main-nav .current-menu-item .sub-menu,
.main-navigation .main-nav .current-menu-ancestor .sub-menu {
opacity: 1 !important;
display: block !important;
left: auto;
right: auto !important;
position: relative;
width: 100%;
clear: both !important;
top: auto;
float: none;
}

.current-menu-item .dropdown-menu-toggle,
.current-menu-ancestor .dropdown-menu-toggle {
display: none;
}
}

I don’t however know what to do with it or where to add it?

Thanks,

[David]

Hi there,

that is CSS – this document explains how to add it:

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

But for the Off Canvas use this CSS instead:

#generate-slideout-menu.main-navigation ul li ul {
    display: block !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    height: auto;
    overflow: visible;
}

[Robert]

Hi,
Thanks for the speedy reply.

That works great but can I have the Sub Menu indended or with someway of showing its a submenu?

Cheers,

[Leo]

Try this CSS as well:

#generate-slideout-menu.main-navigation .main-nav ul ul li a {
    padding-left: 40px;
}

[Robert]

Great, thanks guys.

[Leo]

No problem 🙂

[Author]

Posts