[Resolved] Off Canvas 100vh Problem on Mobile

[Anthony]

Having trouble with the Off-Canvas menu.

I have a Siteorigin Tab Widget inside of it to allow viewers to toggle back and forth from a menu to a contact form.

But, when you scroll down on Mobile the tabs for the tab widget get tucked under the bottom “thumb bar thingy” from Samsung/other devices as seen in this side by side:

https://snipboard.io/A1CsIP.jpg

Is there any way to avoid this? I have the Tabs Containter fixed to the bottom of the slideout menu and the actual Tab Panels (where the content is) have an overflow: scroll; so they can scroll underneath the tabs.

I tried .main-navigation.offside { height: 100vh; } vs. .main-navigation.offside { height: 100%; }

Is this just inevitable / perhaps I should think about a redesign of what I’m trying to achieve?

[Tom]

Hi there,

This is a tough one – does this do anything?:

html, body {
    height: 100%;
}

[Anthony]

That seemed to work a little but I can’t get it to be stable.

I may shift the tabs to the top of the off-canvas menu or maybe even scratch that idea as a whole.

Thanks Tom!

Super stoked for 1.11.0 You guys rock!

[Tom]

No problem. Thanks! We’re excited about it too 🙂

[Author]

Posts