[Resolved] Off canvas panel position

[Bernhard]

Hello,
I added

body .offside--left {
    margin-top: 85px;
}

to fix the off canvas menu below the toggle. The problem is, that it sticks there when scrolling up and the menu items in the bottom in some viewing conditions are not shown.

I think, it would be good to have the off canvas menu (when open) scrolling up together with the secondary navigation and the toggle and then stick to the top of the page. Is this possible?

[David]

Hi there,

try adding some margin to the bottom of the menu with this CSS:

.slideout-navigation .main-nav {
    margin-bottom: 120px !important;
}

[Bernhard]

OK, thank you. I have added the margin-bottom.

In the test, I took out the margin-top and set the close button outside. Now the toggle and the label shall disappear behind the slideout menu and the close button shall go down some px and be resized 1.4em bold.

[Elvin]

Hi there,

To make the toggle go behind the slideout menu, add this:

#generate-slideout-menu {
    z-index: 100002;
}

For the close button to go down, add this:

.offside-js--is-left.slide-opened .slideout-overlay button.slideout-exit {
    font-size: 1.4em;
    margin-top: 20px;
}

Increase the margin-top value for it to go down further.

As for thickness of the close button, font-weight won’t work because it’s using SVG rather than a font file.

If you want to change its thickness, you’ll have to get a new SVG file with a thicker X close icon and use it in place of the default SVG icon for the close button.

You can do that using Tom’s code here:
https://generatepress.com/forums/topic/change-slideout-exit-icon/#post-1230639

[Bernhard]

Hello,
the close button is ok now but the menu toggle is still in front of the slideout menu.

[Tom]

That’s due to this custom CSS in your child theme:

.menu-bar-item.slideout-toggle {
    z-index: 100002;
}

If you remove it, the menu toggle will be behind the off-canvas panel.

[Bernhard]

Perfect, thank you 🙂 .

[Tom]

No problem 🙂

[Author]

Posts