Menu Navbar height

[Vasundhara6]

Hi
I want to reduce the height of the navbar. I was using this code (found from the support forums) which was working perfectly, until it stopped after an update:

#main-nav ul.menu > li > a, #main-nav ul.mega-menu > li > a {
padding: 5px 15px !important;
}

I want to be able to reduce the height of the navbar to around 45 (it is currently set at 80) while also keeping the alignment of the text to be centered.

Thank you!

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please add this to Theme Options => Custom CSS:

#main-nav-sticky-wrapper {
    height: 40px !important;
}
#main-nav.center-menu  nav#main-navigation, #main-nav.center-menu nav.float-alt-menu {
    min-height: 40px; 
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link {
    height: 40px;
    line-height: 40px;
}

[Vasundhara6]

I tried the above provided code but sadly the issue wasn’t been resolved. The navbar height got reduced to 67 and the text wasn’t centered in the navbar anymore but was aligned at the bottom of the bar.

[David Martin – Support]

Please update the code to:

#main-nav-sticky-wrapper {
    height: 40px !important;
}
#main-nav.center-menu  nav#main-navigation, #main-nav.center-menu nav.float-alt-menu {
    min-height: 40px; 
}
.full-center #main-navigation ul.menu > li > a, .full-center nav.float-alt-menu ul.menu > li > a, .full-center nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, .split-menu ul.menu > li, .header-1 .split-menu .no-menu, #sf-full-header-search, .float-menu nav > .mega-menu-wrap ul.mega-menu > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item, #mega-menu-wrap-main_navigation #mega-menu-main_navigation > li.mega-menu-item > a.mega-menu-link, #main-nav .aux-item .std-menu ul.menu > li {
    height: 40px;
    line-height: 40px;
}

[Vasundhara6]

Thanks a lot! That did the trick.

[Rui Guerreiro – SUPPORT]

Glad it’s sorted.
-Rui