[Resolved] Two off-canvas menus

[David]

Not actually seeing issue A – but theres a problem here.
Your header is a different height to the sticky header – so the offset needs to be different but the off canvas was never designed for this so theres no way to adjust for that.

So first off in @media (max-width: 768px) { media query there is this CSS Rule:

#generate-slideout-menu.offside {
    left: -100vw;
    top: 100px;
}

Adjust the top: 100px; value so it looks correct in A.

Then in the same media query you have this rule:

.offside-js--is-open .slideout-overlay {
    display: none;
}

Which is hiding the overlay, remove that. And add this in its place:

.offside-js--is-open .slideout-overlay {
    z-index: 1000;
    background-color: #fff;
    pointer-events: none;
}

That will simply make the overlay white so theres not noticeable gap on scroll.

Off Canvas menu items typography can be set in Customizer > Typography – its in the list of Target Elements.

If you need any custom styles outside of those, then can you raise a new topic for that.

[Raul]

Thank you very, very much, David.
Yet, after I’ve changed the .offside-js–is-open .slideout-overlay, I’ve lost the close button when the page is not scrolled down…

[David]

In that last CSS rule i provided change:

z-index: 1000;

to

z-index: 10;

[Raul]

Thank you very much, David and team!
I will open a new support ticket if I won’t know how configure the Off Canvas menu.

[David]

Glad we could be of help!

[Author]

Posts