Off canvas panel page scroll issue

[Sam]

Hi, I have two small issues I wish to try and address:

1) when the off-canvas panel is open and viewed in chrome browser on ios, the bottom bar of the browser window obscures the last widget. So in my case, it is the WC basket widget and the buttons are obscured. If you fiddle around with swiping up and down you can eventually get to it. Is there a fix for this, maybe adding some padding or something to make the off-canvas panel long enough so the last widget sits above?

Please see my staging site (link provided).

I tested Firefox and that did not have the issue. However, Safari is the same but not quite as bad.

2) when the off-canvas panel is open, the page behind still scrolls sometimes when your swipe gestures intention is to move the off-canvas panel. Is there a way to stop this?

thanks
Sam

[Tom]

Hi there,

1. I’m not seeing this. Can you show us a screenshot?

2. Try this CSS:

.slide-opened body {
    overflow: hidden;
}

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sam]

Hi Tom,

1) see here: https://www.dropbox.com/s/502gnjwvqhm4vjv/IMG_2444.PNG?dl=0
2) can you explain what that css snippet was meant to do, I do not see any change.

thanks

[Tom]

What if you did this?:

.slideout-navigation .inside-navigation {
    padding-bottom: 50px;
}

The other code should prevent any sort of scrolling when the off canvas panel is open. It seems to be working on my end?

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sam]

Hi Tom, thanks, that CSS worked it just needed 100px to clear the frame in chrome iOS.

Regarding the scrolling issue, it’s a weird one to describe. If you swipe the overlay when the off-canvas menu is open then the page beneath scrolls. The problem is if you do this by accident then you cannot grab the off-canvas panel properly until the page has full stopped scrolling. Does that make sense?

A simple solution could be to add a setting in the customizer so you can set the width of the slide-out off canvas panel so you could have it full width?

thanks
Sam

[David]

Hi there,

in the Off Canvas panel options you have Style > Overlay this will cover the entire screen.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/

[Sam]

Hi David, yes I have seen that, but the styling is completely different.

[Tom]

If you swipe the overlay when the off-canvas menu is open then the page beneath scrolls. The problem is if you do this by accident then you cannot grab the off-canvas panel properly until the page has full stopped scrolling. Does that make sense?

The CSS I provided should make it so the page beneath can’t be scrolled.

However, the overlay style can be styled to look exactly like the slide style if full width suits you better – they both have the same options.

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Sam]

Hi Tom, right I see. It’s strange that it works differently for me. I will double check I executed that CSS properly. Noted on restyling the overlay. The reason I suggested setting the width of the slide-out was I thought it might involve less css.

[Tom]

The overlay option is already built in, so if you can make that work it’s the best method when it comes to using less CSS 🙂

Documentation: http://docs.generatepress.com/
Adding CSS: http://docs.generatepress.com/article/adding-css/
Ongoing Development: https://generatepress.com/ongoing-development

[Author]

Posts