Primary Navigation Overview #

Mobile Menu Label #

Note: This option requires the Menu Plus add-on in GP Premium. On mobile, your navigation collapses into a mobile menu with the universal 3 bars icon (for menus) and the text “Menu”. This text can be adjusted in Settings > Customize > Layout > Primary Navigation.

---

Navigation Widths & Alignment #

Navigation layout options for GP can be found in  Settings > Customize > Layout > Primary Navigation.

Navigation Width #

The Navigation Width option is the outer container of your navigation. This outer container is what your navigation background color or image is applied to.

Setting this to Full will make your background color/image span the entire width of your screen.

Setting it to Contained will contain it to the width of your container, set in  Settings > Customize > Container.

Inner Navigation Width #

The Inner Navigation Width option refers to the inner container which holds your menu items.

Setting this to Full will make your menu items span the entire width of your screen.

Setting it to Contained will contain your menu items to the width of your container.

Navigation Alignment #

You can choose to align your menu items to the left, center or right.

---

Navigation Location #

The Navigation Location option can be found in  Settings > Customize > Layout > Primary Navigation. Prior to GP 1.3.42, it was named Navigation Position.

This option allows you to move your primary navigation to different areas on your website.

Each name is pretty self explanatory – simply select each option and you’ll see your navigation move instantly.

Of course, if you choose either of the sidebar options, that sidebar must be view-able on the page to see your navigation.

Navigation Drop point #

One of the issues we see a lot is when the navigation is aligned right (or left), and the browser isn’t wide enough to fit the logo and navigation on one line.

To combat this, we’ve added a new option which allows you to specify a width at which point the navigation will drop down onto its own line and center.

---

Navigation Dropdown #

The Navigation Dropdown option can be found in  Settings > Customize > Layout > Primary Navigation.

This option allows you to choose how your navigation dropdown menu is initiated.

Hover #

The hover option makes it so your dropdown menu appears when you hover over the parent menu item.

Click – Menu Item #

This option makes it so you have to click the entire menu item in order for the dropdown menu to appear. This disables the parent menu item link, as clicking only opens the dropdown menu.

Click – Arrow #

This option makes it so you have to click the dropdown menu arrow in order to open the dropdown menu. This option is good if you want to keep the parent menu item link.

Dropdown Direction #

Starting in GeneratePress 2.2, you can now change the direction of the sub-menu when you’re using a regular hover dropdown type.

---

Navigation Search #

The Navigation Search option can be found in  Settings > Customize > Layout > Primary Navigation.

This option adds a search icon (magnifying glass) to your navigation bar. When you click it, a semi-transparent search bar covers your menu items and allows you to enter a term to search your site.

---

Navigation Logo #

You can upload a logo inside your navigation by going to  Settings > Customize > Layout > Primary Navigation.

See this article if you wish to display your site title instead of navigation logo.

Uploading a navigation logo will place it inside your navigation to the left of your menu items.

The Navigation Logo Position option has 3 choices:

• Sticky – your navigation logo will only appear in the sticky navigation
• Static – your navigation logo will only appear in your static navigation – meaning it’s not sticky.
• Sticky + Static – your navigation logo will appear in both your sticky and static navigation.

Float Navigation Logo Outside Container #

The steps above show you how to use the navigation as header. In some cases, users would like to float the logo outside the container.

1. Activate Use Navigation as Header option.
2. Add the following CSS:

.main-navigation .site-logo.navigation-logo {
    position: absolute;
    left: 0;
    top: 0;
}
.main-navigation .site-logo.navigation-logo img {
    height: auto; /* Set the image height of logo in px */
}

---

Menu Item Height & Width #

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 #

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