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.

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%;
    }