Archived topic

Off Canvas Menu

6 replies · Started by Robert on August 4, 2020

Viewing posts 1–7 of 7

August 4, 2020 at 11:44 am #1387317

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

August 4, 2020 at 12:39 pm #1387362

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,

August 4, 2020 at 1:19 pm #1387406

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

August 4, 2020 at 1:29 pm #1387424

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,

August 4, 2020 at 1:36 pm #1387435

Try this CSS as well:

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

August 4, 2020 at 1:43 pm #1387447

Great, thanks guys.

August 4, 2020 at 2:59 pm #1387515

No problem :)

This archived topic is closed to new replies.

Start building better websites today.