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.
Menu item size options
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
The sub-menu item width is default at 200px. In some cases you may want to increase the width to keep the text in one line.
Here are a few methods using CSS:
Specify a width:
.main-navigation ul ul {
width: 250px;
}
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%;
}
Menu Item Height & Width
Menu Item Height & Width