[Resolved] Customizing Off Canvas Panel

[Vish]

Hello Tom

I have two questions regarding the off-canvas panel.

1. Is there a way to trigger the off-canvas panel when the secondary menu (or a button – which I have kept inside the navigation in mobile-view; please see the site in mobile view) is clicked? In desktop, I have both the regular menu and the off-canvas panel enabled. I would like to have the same setup on mobile as well.

2. In the off-canvas panel, the menu items are displayed like this:

Menu-Item-1
Menu-Item-2
Menu-Item-3
Menu-Item-4
(one per line)

Would it be possible to display the menu items side by side like this:
Menu-Item-1 Menu-Item-2 Menu-Item-3 Menu-Item-4

PS: Site link included

[Tom]

Hi there,

You can trigger the off canvas panel with this class: slideout-toggle

So you can add that class to a menu item, or add it to a button/link to trigger the panel.

Try this for the inline items:

.slideout-navigation.do-overlay .inside-navigation .main-nav {
    min-width: 100%;
}

#menu-off-canvas {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

#generate-slideout-menu.do-overlay .slideout-menu li {
    width: auto;
    margin: 10px;
}

[Vish]

Tom – you son of a gun! You have no idea how many people’s lives you’ve made easier with GP. Thank you very much 🙂

[Tom]

You’re very welcome! 🙂

[Author]

Posts