Menu Item Height & Width

Note: These options require the Spacing add-on in GP Premium.

We can adjust the width and height of our menu items, as well as the height of our sub-menu items in Customize > Layout > Primary Navigation.

Note that this can be adjusted separately for desktop and mobile by using the toggle buttons.

Width

This option adds the value to the left and right of your menu item item text. 20 = 20px on either side of your text.

Height

This value determines the height of your menu items. 60 = 60px tall.

Sub-Menu Item Height

This value determines the height of your sub-menu items. 10 = 10px on top and bottom of the text.

Sub-Menu Item Width

This value determines the width of your sub-menu items. The default at 200px.

Here are a few CSS methods if you prefer to set the sub menu width dynamically instead of a fixed width:

• Auto adjust width to match the longest sub-menu item:

.main-navigation ul ul {
    width: auto;
    white-space: nowrap;
}

• Inherit parent menu item width:

.main-navigation ul ul {
    width: 100%;
}