[Shaun NParticipant]

After having implimented a mobile menu in desktop view as per instructions provided in previous post (https://community.theme.co//forums/topic/mobie-menu-in-desktop-view/#post-350590), I now have a new problem. When the dropdown sections are clicked and they expand beyond the screen height, the browser window does not scroll down in essence not allowing the client the view the rest of the menu. I am using chrome.

http://arthurk.co.za

[Shaun NParticipant]

This reply has been marked as private.

[Paul RModerator]

Hi Shaun,

To fix this, you need to set a max height for your navbar then add a scroll if your menu overflows the maximum height.

To do that, you can add this under Custom > CSS in the Customizer.

body .x-navbar {
    max-height: 630px;
    overflow-y: scroll;
}

Hope that helps.

[Shaun NParticipant]

Thanks, that worked, but now I have a scrollbar in my nav bar which looks odd. Can I hide the scrollbar, but keep the functionality?

[ZeshanMember]

Hi Shaun,

This could technically be possible to hide the scrollbar by using some jQuery plugin but would fall beyond the scope of support we can provide. You may wish to consult a developer to assist you with this. X is quite extensible with child themes, so there are plenty of possibilities.

Or perhaps if you want to apply the provided CSS only on mobile menu, you can use following CSS code instead:

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

Thanks for understanding.

[Author]

Posts