[Resolved] Customizing Off Canvas Panel

Home Forums Support Customizing Off Canvas Panel

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • #1151605
    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

    #1151726
    Tom
    Lead Developer
    Lead Developer

    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;
    }
    #1151857
    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 🙂

    #1152207
    Tom
    Lead Developer
    Lead Developer
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.