Mobile Nav Bar Fixed and Sub-menu Scroll

[SydeL]

Hi! I want a top fixed menu but I also want to scroll through the menu if its longer than the mobile screen. I tried the code below and it works perfectly when you click the menu bar and scroll through. But the height: 100vh; has created a sheet cover over the rest of the website. I tried reducing the value but it does not work. Need help! Please see image as well. Thanks!

@media (max-width: 979px){
.x-navbar-fixed-top,
.x-navbar-fixed-left,
.x-navbar-fixed-right {
position: fixed;
overflow-y: scroll;
height: 100vh;
}
}

[nabeel]

Hi there,

Thanks for writing around! Try replacing your code with the following code:

@media screen and (max-width: 979px) {
    .x-navbar-fixed-top, 
    .x-navbar-fixed-left, 
    .x-navbar-fixed-right {
        position: fixed !important;
        overflow-y: scroll;
        height: 100%;
    }
}

Let us know how this goes!

[SydeL]

Hello,

It didn’t work still behaving the same way. The navbar is covering the entire mobile screen when you scroll.

Please help i need the is function to work or mobile users won’t have access to some of my website content. Thanks In Advance!

[ruenel]

Hello There,

Please update the css code again and use this instead:

@media screen and (max-width: 979px){
  .x-navbar-fixed-top, .x-navbar-fixed-left, .x-navbar-fixed-right {
    position: fixed !important;
    overflow-y: scroll;
    max-height: 100vh;
  }
}

Please let us know if this works out for you.

[SydeL]

Works perfectly thank you very much

[ruenel]

You are most welcome!