[Resolved] Two off-canvas menus

[Raul]

Hello!

I would like to achieve something like in dietdoctor(dot)com website. I want an off-canvas menu in the left for all the links, some text, widget(s) and another menu for logins, signups or members’ links in the right. The logo/icon would go in the middle. Something similar also has bulletproof(dot)com for the mobile version.
Is this possible or could you, please, suggest a workaround?

[David]

Hi there,

i am not seeing 2 x Off Canvas menus on either of those sites? Can you clarify?

[Raul]

Ooops, I am sorry. Indeed, in those home-pages, there is only one Off Canvas menu and the login icon is just a normal link.
Two Off Canvas menus are only visible after login. I have attached here an image with the second Off Canvas menu from the member’s account:

[Leo]

Hi there,

Any chance you can link us to the site in question?

You can use the private information field:
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Raul]

For now I would like to learn how to create those two off canvas menus, if possible. After that, I want to have such menus for more websites that have a community.
I have looked over your examples of menus used in your site library but they were all different.

So, could you please indicate the best way to achieve this (as in the home-pages of the above websites):
1. Off Canvas menu (with links, text and widget) in the left,
2. logo in the center and
3. icon/link in the right – instead of Off Canvas menu if that’s not possible.

[David]

The second Off Canvas Menu would require a plugin. Its not something the them can currently do.

The layout you describe is not too difficult to achieve. But would require some CSS.
To begin you would:

1. Create the Menu for the Off Canvas – and set its location to Off Canvas.
2. Create a second menu for the links to the right – and set its location to the Primary Navigation.
3. In Customizer you want to enable the Off Canvas Panel, and set the Customizer > Layout > Primary Navigation to Float Right.
4. Make sure theres a logo in the Site Identity.

If you can set that up we can assist with some CSS to create the layout.

Something to consider – what happens to those right hand links on mobile ? Will they appear in the Off Canvas Panel?

[Raul]

Thank you very much. I have done what you indicated here on a test website. I can’t wait to get the rest of instructions 😀

For the logged OUT users, on the right I want just an icon with a link to the login/register webpage.
For the logged IN users/members, I think that I’ll use a plugin like “User Menus” to modify the Off Canvas menu and add what links I need. Probably, I’ll create a ‘dashboard’ page with all the links the members need – instead of the second Off Canvas.

[David]

Now try adding this CSS:

.inside-header {
    position: relative;
}
.site-logo {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}
.nav-float-right #site-navigation {
    flex: 1;
}
.main-navigation .inside-navigation {
    flex-direction: row-reverse;
}

@media(max-width: 768px) {
    .mobile-menu-control-wrapper {
        margin-left: unset !important;
        margin-right: auto;
    }
    .has-inline-mobile-toggle #site-navigation {
        flex-basis: auto !important;
    }
    .main-navigation:not(.slideout-navigation):not(.toggled) .main-nav > ul {
        display: flex !important;
    }
}

[Raul]

Thank you very much for your time, David and team.

A problem is that, especially for mobile version, the left-menu and right-menu are very close to the logo. I would like them to be aligned at the left, respectively right margins. How could I achieve that?

Another thing: how can I get the Off Canvas menu be full ‘page’ for mobile with the close button in the top corner as that of the dietdoctor website?

[David]

Sorry little bit of brain fog today…. how do you want them displayed on mobile?
Can you share a mockup ?

[Raul]

I like as in the website indicated in the posts above:
Also, it’s a sticky menu.

That is a full-page offcanvas menu for mobiles and the close button remains on top. Then, I will populate the menu with links, text and widgets as I saw in your examples 4 and 5.

[David]

Now add this CSS to make the changes the mobile off-canvas opening:

@media(max-width: 768px) {
    .slide-opened body {
        overflow-y: hidden;
    }
    #generate-slideout-menu.offside {
        left: -100vw;
        top: 100px;
    }
    #generate-slideout-menu.main-navigation.offside {
        width: 100vw;
    }
    #generate-slideout-menu.offside--left.is-open {
        transform: translate3d(100vw, 0, 0);
    }
    .offside-js--is-open .slideout-overlay {
        display: none;
    }
    html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(1),
    html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(2) {
        display: none !important;
    }
    html:not(.slide-opened) .menu-toggle .icon-menu-bars svg:nth-child(1),
    html.slide-opened .menu-toggle .icon-menu-bars svg:nth-child(2) {
        display: block !important;
    }
}

[Raul]

Thank you a lot; it works great.
How can this work for sticky navigation too? When I enabled it, there is problem with the order of the menus and logo.

[David]

Change this CSS:

.site-logo {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

to:

.site-logo, .navigation-branding {
    position: absolute;
    top: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
}

#sticky-navigation .navigation-branding {
    top: 0;
}

[Raul]

Sorry, for some reason it doesn’t work…

[Author]

Posts