[Support request] off canvas width and height changes

[Streater]

I was able to get the default mobile menu looking as good as I could with customizations… but it seemed like the off canvas menu was going to solve issues with scrolling on a phone. So I switched.

I really like the off canvas and it solves the scrolling issues… BUT I ran into new issues which I don’t see anyone else having in the forums:

I’m trying to get it to be fullwidth… I was able to get it with the inspect element tool but this doesn’t work in practice:

#generate-slideout-menu .main-navigation .slideout-navigation .offside--left .is-open"{
    width: 100vw;
}

I also want to see my top navigation bar (not have the menu cover it up) and use my original X out (where the hamburger is positioned) but I assume those should be separate topics.

[Leo]

Hi there,

Have you considered using the Overlay style of the off canvas panel?
https://docs.generatepress.com/article/off-canvas-panel-overview/#style

Then it will be full width by default 🙂

[Streater]

Overlay doesn’t have the slide effect though right? I do like that feature.

I did try this code below which makes it appear full width but my menu links have a hover background color change which isn’t full width… so the menu appears to be fullwidth but it really isn’t.

‘
.offside-js–is-open .slideout-overlay {
background-color: #fff
}
‘
FYI I did figure out how to solve the issue (that I thought should be a separate topic) with the navigation bar with the z-index.

[Leo]

Try the CSS here:
https://generatepress.com/forums/topic/mobile-logo-and-opening-menu-slideout/page/2/#post-804113

[Streater]

Tried it and it isn’t working for me… David says that Fullscreen was going to be added to a new version… looks like he said that 2 years ago… was that added?

[Leo]

The full screen option he mentioned is the overlay option I mentioned so yes it was added.

Can you try the CSS here and modify 500px to 100vw?
https://generatepress.com/forums/topic/off-canvas-menu-2-issues/#post-1578033

If that still doesn’t work, please link us to the page in question with the CSS added.

Thanks!

[Streater]

So the menu works perfect with that… but when the menu is supposed to be closed (like when you first go to the site or you exit out of the menu) the menu background is still there but without the links and is pushing page content to the side. Any ideas? (link below in private info to site)

[David]

Hi there,

i replied to your other topic. If we can keep it to that topic i will provide some alternative CSS.

[Streater]

Removed it… thanks!

[Leo]

Glad to hear 🙂

[Streater]

I think there was confusion on this… this isn’t solved.

David said to remove the CSS Leo gave me in order to solve this issue:
https://generatepress.com/forums/topic/hamburger-switches-to-an-x-on-off-canvas-menu/#post-1841900

The CSS Leo gave me created the menu I wanted but when the menu was closed you could still see the menu.

Any ideas?

[David]

Try this CSS to make it fill the viewport:

#generate-slideout-menu.main-navigation.offside {
    width: 100%;
}
#generate-slideout-menu.main-navigation.offside--left {
    left: -100%;
}
#generate-slideout-menu.main-navigation.offside--left.is-open {
    transform: translate3d(100%,0,0);
}

You will need to adjust your CSS that is adjusting its Top position ie.

@media only screen and (max-width: 768px) {
    #generate-slideout-menu {
        top: 40px!important;
        z-index: 0!important;
    }
}

The Mobile header is 80px tall.

[Streater]

Wow it’s perfect now! Thank you so much!

Side note on that Top position… 80px does fix that… but I noticed the WordPress admin bar effects the menu position not that it matters because it looks good to the User. BUT when viewed on an iPhone and the menu is opened, and a User is scrolling up, they can drag the admin bar down over the menu which looks weird… I mean only if they are really playing around with it. It seems like the menu and the bar have different position attributes?

[David]

You can add a separate CSS rule to adjust the Off Canvas position when the admin bar is present:

.admin-bar #generate-slideout-menu {
    top: 112px!important;
}

Adjust the Top value to suit.

[Author]

Posts