Styling Mobile Navbar

Support
#1

Hello, I’d like to add more pages to this website and in order to do that I’d like to reduce the height of the navbar as it appears on mobile devices so that the tabs at the bottom are not cut off. Are there some global CSS rules that could be put in to allow styling of the mobile navbar? Attached is a screenshot of the navbar as it drops down on mobile.

#2

Hi Jeremy,

Thanks for writing in!

To resolve your issue, please make use of this custom css:

.x-navbar .mobile .x-nav {
    margin: 0 auto;
}

.x-navbar .mobile .x-nav li>a {
    margin: 0 auto;
    padding-top: 10px;
    padding-bottom: 10px;
}

Hope this helps. Please let us know how it goes.

#3

@RueNel thank you! That appears to be working. Would you kindly explain this code? Does the selector li>a simply designate anytime the navbar renders as a list?

#4

Hey There,

The > will force the code to apply the css only to the parent menu items. It will not be applied to submenu items. For more details about this css selector, please check this out: https://www.w3schools.com/cssref/css_selectors.asp

Best Regards.

#5

Thank you for that explanation @RueNel !

#6

Glad we could help.

Cheers!

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.