[Resolved] Mobile Menu Scrolling Off Canvas Panel issue

[Streater]

The Off Canvas Panel menu is looking great… but there is an issue I noticed. If a mobile user turns their phone to look at it the horizontal way… then they go to the menu, they can’t scroll all the way down to the last items. It only scrolls so far.

Any ideas?

Thanks!

[Ying]

Hi Streater,

I can’t replicate your issue, you should be able to scroll the last items even when the mobile device is in the horizontal direction.

Can you link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know 🙂

[Streater]

Site link below… looks great on vertical but but you can’t get all the way to the bottom on horizontal view… it scrolls but not all the way.

[Ying]

I think it’s because you have this CSS added:
https://www.screencast.com/t/y9eNMqT8tAXB

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

Can you try removing top: 80px!important; to test?

[Streater]

If I eliminate that, the nav bar covers the top of the menu and then on scroll the nav menu disappears. BUT on horizontal view the bottom does show… but the top of the menu now does not

[Ying]

The top of the slide-out navigation is covered because you set the slide-out menu z-index to 0 in the CSS I attached in my last reply.

[Streater]

Before I eliminated the whole thing… I brought back the z-index now… and the nav menu covers the top of the menu on horizontal and vertical…

There must be CSS to allow full scrolling. I remember the same thing happened on my DIVI site and they had code that allowed for more scrolling. It was:

     height: 100vh !important;
    overflow-y: visible !important;
    overflow-x:hidden !important;
    min-height: 100vh !important;
  padding-bottom:50px;

But that doesn’t work here.

[Ying]

If you really need that layout, try add this CSS:

#generate-slideout-menu {
    height: calc(100vh - 80px);
}

[Streater]

Perfect! Thanks for your help!

[Ying]

You are welcome 🙂

[Author]

Posts