[Resolved] Two off-canvas menus

[Ying]

Try add this CSS as well:

body .main-navigation.has-sticky-branding.navigation-stick:not([class*=nav-align-]):not(.mobile-header-navigation) .inside-navigation {
    justify-content: space-between;
}

Let me know 🙂

[Raul]

Now the sticky menu is okay on mobile when it appears (scrolling down). How can I achieve the same look before the sticky menu appears?

[David]

In Customizer > Layout > Header, switch to mobile view and reduce the Padding.
Add this CSS to remove the background from the hamburger:

.mobile-menu-control-wrapper .menu-toggle {
    background-color: unset;
}

[Raul]

Thank you, again, very much.
There are still 2 more things:
– A Problem: if I scroll down and then open the left Off Canvas menu, I lose the Primary menu (the right-side navigation);
– How can I align vertically the right navigation-menu / icon in the middle?

I am sorry for so many questions but I intend to use this kind of menu in at least 11 websites 🙂

[Ying]

1. You have some CSS interfering with it, but I can’t see where the CSS comes from, can you disable all cache plugins?

2. Add this CSS:

div#primary-menu ul li a {
    display: flex;
}

[Raul]

I have disabled the caching plugin. It seems that the right-hand menu (icon) disappears when I close the Off Canvas menu.

[Ying]

Try this CSS:

.slideout-both .main-navigation.toggled .main-nav>ul {
    display: flex !important;
}
.main-navigation .main-nav#primary-menu {
    flex-basis: unset;
}
.inside-navigation.grid-container {
    background-color: #ffffff;
}

[Raul]

It’s better now but it’s still problematic.
+ It’s good that the right-hand menu (icon) gets back after the Off Canvas is closed
– It’s not good because a) the icon moves to the left-side when the Off Canvas menu is open and b) there is one more close icon of the Off Canvas menu

[Ying]

a) the icon moves to the left-side when the Off Canvas menu is open

I don’t see this issue, either on my desktop or on my iPhone.
https://www.screencast.com/t/fS0UfuvnnOU6

b) there is one more close icon of the Off Canvas menu

Add this CSS to hide the close.

@media (max-width: 768px) {
button.slideout-exit.has-svg-icon {
    display: none;
}
}

[Raul]

a) On Mobile, please check the home-page (which has some text on it), scroll down and see the menu.

[Raul]

c) How can I define the width and padding for the Off Canvas menu for desktop? For example, I would like to have a 400px inner content with a 60px padding, left and right.

[Ying]

For A:

.main-navigation.toggled .main-nav {
    order: 1;
    margin-left: auto;
}

For B:

nav#generate-slideout-menu .inside-navigation {
    max-width: 400px;
    padding-left: 60px;
    padding-right: 60px;
}

I wrote the CSS using your numbers, but I think the numbers need to be tweaked 🙂

[Raul]

Thank you. Solution for A works.

For B is not what I intended. I intend to have a larger area where the content of the Off Canvas menu is displayed for desktop. See example at the website I indicated.

[David]

To change the width of the Off Canvas on desktop you need this CSS:

@media(min-width: 769px) {
    #generate-slideout-menu.offside {
        left: -400px;
    }

    #generate-slideout-menu.main-navigation.offside {
        width: 400px;
    }

    #generate-slideout-menu.offside--left.is-open {
        transform: translate3d(400px, 0, 0);
    }
}

This will set it to 400px. If you need to change that then you need to change all 3 instances of that value in the CSS.

[Raul]

Thank you very much!

There is still a small problem for mobile – in both cases A and B (see image), there is a wrong padding between the top and the Off Canvas menu.
In case A, the close button is partially covered. In case B (after scrolling down the home-page), there is a unwanted padding.

I also have a question and I hope I’m good to go:
Where and how can I modify the font-size, font-weight, line-height, paddings etc. of both mobile and desktop Off Canvas content (text and links)?
Or can I see a list of all CSS classes for that?

[Author]

Posts