Site logo

Archived topic

Mobile Menu Scrolling Off Canvas Panel issue

9 replies · Started by Streater on July 21, 2021

Viewing posts 1–10 of 10

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!

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.

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?

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

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.

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.

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

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

Perfect! Thanks for your help!

You are welcome :)

This archived topic is closed to new replies.