[Resolved] off canvas menu items behind overlay

[Brian]

Hello,
I have a site I’ve recently migrated to GP at mikava.coffee. Everything is just about set, but I’m having an issue with my menu. It is an off-canvas menu and when I click/tap, the overlay seems to cover the menu items and they are not clickable/tappable. Can you have a look and let me know what the issue might be? I also want to adjust the width of the slide out to automatically size based on the length of the menu items, but can’t figure out where to do that either. These are both issues on both mobile and desktop.
Thank you!

[Bryan]

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

It looks as if something is overriding this code. I don’t know what it is, but as a temporary fix, you could try adding it back in as additional CSS with the code below until someone else can figure it out.

#generate-slideout-menu {
    z-index: 100001 !important;
}

[Brian]

That’s perfect. Thank you!! It’s a small bit of CSS, so I don’t mind leaving it in.

[Bryan]

You are welcome! It is just a bandaid. I would still like to know what is causing the issue. Hopefully someone else will be able to dig it up.

[Brian]

Fair enough 😉
I’ll leave this open then in case someone else can figure it out. Thank you!

[David]

Hi there,

i believe the sticky issue has been resolved in this topic:

https://generatepress.com/forums/topic/sticky-header-behind-elements/#post-1622123

The width of the Slideout is a fixed size…. we can provide some CSS to increase its width if you want but it can’t be automatically based on the menu item length … let me know.

[Brian]

I wouldn’t mind reducing it’s size a bit, so the CSS would help since I couldn’t find it the class/element through Chrome’s inspection tools.

Thank you and Bryan both for your fast and helpful assistance!

[Brian]

Actually, can I add an off-topic question here since you’re looking at the site already? My client can’t see the video background playing on his phone or tablet (both iOS), but it looks great on my devices. This worked for all devices with the previous theme, so I’m wondering if there is anything that could be going on between GP and the video background plugin I’m using?

Thanks so much!

[David]

Try this CSS:

/* Max width of slide-out */
:root {
  --slide-width: 500px;
}
/* Mobile max width of slide out */
@media(max-width: 500px) {
  :root {
    --slide-width: 300px;
  }
}
body .main-navigation.offside {
  width: var(--slide-width);
}
body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
  -webkit-transform: translate3d(-var(--slide-width),0,0);
  -moz-transform: translate3d(-var(--slide-width),0,0);
  -ms-transform: translate3d(-var(--slide-width),0,0);
  -o-transform: translate3d(-var(--slide-width),0,0);
  transform: translate3d(-var(--slide-width),0,0);
}

body .offside--right {
  right: -var(--slide-width);
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
  right: var(--slide-width) !important;
}

Would you mind raising a new topic for the other issue as it makes it easier for them to be tracked.

[Brian]

No luck unfortunately. The full CSS kept the menu open and up above the top of the page. When I just kept in the max width, it looked all right on desktop, but on mobile, it didn’t change. In both cases, it was a bit high, but that’s easy enough to fix 😉

And will do on the other topic.
Thank you!

[David]

Hmmm… are you happy with what you have so far? Or do you want me to review the CSS?

[Brian]

Honestly, I’m happy with it because my clients didn’t say anything about it yet 😉 But if it were my site (aside from being dramatically different than their style), I would definitely want to shrink the width, at least on mobile (on my Android, it takes up about 70% of the width at the moment which is a touch awkward). So, it’s by no means urgent, or even 100% necessary, but I would love to know how to customize that in the event they do notice at some point.
Thanks!

[David]

Odd – that should have worked… you can try it without the CSS Variables:

/* Desktop Off Canvas width */
body .offside--right.is-open, body .offside-js--is-right .offside-sliding-element {
    -webkit-transform: translate3d(-500px,0,0);
    -moz-transform: translate3d(-500px,0,0);
    -ms-transform: translate3d(-500px,0,0);
    -o-transform: translate3d(-500px,0,0);
    transform: translate3d(-500px,0,0);
}

body .main-navigation.offside {
    width: 500px;
}

body .offside--right {
    right: -500px;
}

.offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
    right: 500px !important;
}

/* Mobile Off Canvas Width */
@media(max-width: 400px) {

    body .offside--right.is-open,
    body .offside-js--is-right .offside-sliding-element {
        -webkit-transform: translate3d(-310px, 0, 0);
        -moz-transform: translate3d(-310px, 0, 0);
        -ms-transform: translate3d(-310px, 0, 0);
        -o-transform: translate3d(-310px, 0, 0);
        transform: translate3d(-310px, 0, 0);
    }

    body .main-navigation.offside {
        width: 310px;
    }

    body .offside--right {
        right: -310px;
    }

    .offside-js--is-right.slide-opened .slideout-overlay button.slideout-exit {
        right: 310px !important;
    }
}

[Brian]

With a few minor adjustments (max width 768px and 210px width), it looks good in the customizer preview and Chrome inspector mobile emulator, but not on my phone on the live site (all caches cleared, incognito window). But, I’m sure this is fine until they say anything about it. And maybe it will work on iPhone anyway (what they’re using).
I appreciate the help! Wish I had a more successful result to share, but either way, I’m good with this CSS for now.
Thanks!

[David]

Glad to be of (some) help 🙂

[Author]

Posts