[Support request] Off canvas flyout sub items

[Maro]

Hi
Have you by any chance a snippet or CSS to get the sub items in an off canvas menu to flyout horizontally instead of the default dropdown?

Thanks

[Fernando]

Hi Mario,

Are you referring to Sliding in and out of the Off-Canvas menu? If so, there’s a Style option in Appearance > Customize > Layout > Off Canvas Menu. You can try setting that to Slide. Reference: https://docs.generatepress.com/article/off-canvas-panel-overview/

If you’re referring to something else, can you share a reference site that has your preferred Off-canvas menu so we can have an idea of what you’re going for?

[Maro]

Hi, thanks for the quick reply.
Not the sliding in and out, its more of a second level slidout.
So if a menu item have sub menu items it would slide out instead of dropdown.
You can look at this nav solution https://www.ssab.com/sv-se

Thanks

[David]

Hi there,

does this have to be the Off Canvas ?

As we have this site in our library titled: Sider

https://gpsites.co/sider/

And here a user had the same requests, and Ying provided some CSS to make the sub menus flyout:

https://generatepress.com/forums/topic/submenu-customization-with-leftside-navigation/#post-1679442

[Maro]

Hi, thank you for the reply.

Basically that would be a great solution, but why I would like to have it in the off canvas is for the sliding effect.
And the example that I showed you wasn’t that good, here is a better one https://www.polestar.com/se/

Thanks

[Ying]

It’s kinda tricky, you can give this CSS a try, but I don’t think it’s gonna work perfectly:

#generate-slideout-menu.main-navigation .main-nav ul ul {
    position: absolute;
    left: 0;
    height: 100vh;
    display: block !important;
    opacity: 0;
    transition:all 0.5s ease;
}

nav#generate-slideout-menu {
    overflow: visible;
}

#generate-slideout-menu.main-navigation .main-nav ul li:hover ul {
    visibility: visible;
    left: 265px;
    opacity:1;
}

[Author]

Posts