Changing the Menu Bar Height

You can change the height of the menu using CSS. There are three options below, but unless you are doing something very unique, you will almost certainly want the first solution.

Solution: Increase the height of the top level menu items

This solution is recommended for 99.9% of cases

By adjusting the top and bottom padding on the top level menu item anchors, the item content remains vertically centered and the menu bar height is naturally adjusted.

#megaMenu > ul.megaMenu > li.menu-item > a,
#megaMenu > ul.megaMenu > li.menu-item > span.um-anchoremulator{
    padding-top:20px;
    padding-bottom:20px;
}

Other ways of increasing the height

You would almost never want to use the following options unless you’re doing something unique with your menu. The solution above is recommended for almost every single case.

Increase the padding of the menu bar

#megaMenu ul.megaMenu{
    padding:20px 0px;
}

Increase the height of the menu bar

(Don’t use this on responsive sites, unless you wrap it in a media query)

#megaMenu ul.megaMenu{
    height:50px;
}