Fixed navbar in mobile won't scroll

[romshaorny]

Hello,
I’m using fixed header in my website. It works great in desktop size, but there seems to be a problem in mobile: the header is fixed as it should be, but when I extend the menu - the menu itself is not scrollable and you can’t see it all in smaller devices. I read a couple of threads about this problem, and the suggested solution was to use CSS to make the header not fixed in mobile. This worked, however, It is very important to me that the header will remain static in mobile. Can you offer a solution to this problem (CSS or JS will be fine)?
Thank you

[XSupport]

Hello there,

Please add your site link and login information on a secure note so that we can check.

Best regards.

[romshaorny]

I added it to the previous message

[jade]

Hi there,

Please add this code in the custom CSS:

@media (max-width: 979px) {
    body .x-navbar {
        max-height: 100vh;
        overflow-y: scroll;
    }
}

Hope this helps.

[romshaorny]

Thank you very much, this works great!
I have another question: I want to make the navbar a bit smaller in mobile then in the desktop view. I couldn’t find a way to change it, and using CSS to change the height of “.x-navbar” disables the menu opening (as expected).
Is there a way to do this?

[jade]

Hi there,

Please update the code to:

@media (max-width: 979px) {
    body .x-navbar {
        max-height: 100vh;
        overflow-y: scroll;
    }
    .x-navbar-inner {
        min-height: 60px;
    }
    .x-btn-navbar {
        padding: 6px 10px;
        font-size: 18px !important;
    }

    .x-navbar .x-brand {
        margin-top: 20px;
    }
}

Hope this helps.

[romshaorny]

Great! thanks so much!

[nabeel]

Hi there,

Thanks for writing around! I checked your site in mobile devices and I was able to scroll withing your header when a sub menu is open. There is a scrollbar to the left which is giving an option to scroll within the header. Can you please clear your browser’s cache and reload the site?

Thanks!