Archived topic

Customizing Off Canvas Panel

3 replies · Started by Vish on February 1, 2020

Viewing posts 1–4 of 4

February 1, 2020 at 12:25 pm #1151605

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

February 1, 2020 at 4:41 pm #1151726

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

February 2, 2020 at 1:32 am #1151857

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 :)

February 2, 2020 at 9:08 am #1152207

You're very welcome! :)

This archived topic is closed to new replies.

Start building better websites today.