Harper - Set Up Navigation Menus

For detailed instructions on how to create and use menus in WordPress, click here.

The Harper theme supports five navigation menus: Top Left Navigation Menu, Below Header Navigation Menu, Header Navigation Menu, Footer Navigation Menu, and Mobile Navigation Menu.

  • Top Left Navigation Menu = Menu at the top left of the page (gold background in the demo)
  • Below Header Navigation Menu = Menu underneath your site title or logo (not shown in demo)
  • Header Navigation Menu = Menu to the right of your site title or logo
  • Footer Navigation Menu = Menu at the bottom left corner of your website
  • Mobile Navigation Menu = Menu that displays on mobile devices

Top left navigation menu

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Give your menu a name (such as "Top Navigation") and click Create Menu.
  3. Add the pages/categories you want to have in your top navigation menu.
  4. At the bottom of the page, under Menu Settings, select Top Left Navigation Menu. Save Menu.

Header right navigation menu

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Give your menu a name (such as "Header Navigation") and click Create Menu.
  3. Add the pages/categories you want to have in your header right menu. Save Menu.
  4. Go to Appearance > Widgets. Drag a Navigation Menu widget into the Header Right widget area.
  5. Select the menu you just created. Save.

Below header navigation menu

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Give your menu a name (such as "Secondary Navigation") and click Create Menu.
  3. Add the pages/categories you want to have in your top navigation menu.
  4. At the bottom of the page, under Menu Settings, select Secondary Navigation Menu. Save Menu.
Note: The Below Header navigation menu should not be used in conjunction with the Header Right navigation. If you'd like to use the Below Header navigation, go to Appearance > Widgets > Header Right and remove all the widgets in that widget area.

Footer navigation menu

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Give your menu a name (such as "Footer Navigation") and click Create Menu.
  3. Add the pages/categories you want to have in your footer navigation menu.
  4. At the bottom of the page, under Menu Settings, select Footer Navigation Menu. Save Menu.

Mobile navigation menu

Since the Harper theme has several menus and possible menu configurations, we created a custom Mobile Menu option to give you complete control which menu items you want to display on mobile devices. The mobile menu will only display on devices 1021px and smaller. It won't be shown on the desktop version of your site.

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click "Create a New Menu." Give your menu a name, and then click Create Menu.
  3. Add the pages/categories you want to have in your navigation menu on mobile.
  4. At the bottom of the page, under Menu Settings, select Mobile Menu. Click Save Menu.

Sticky Navigation

Sticky navigation will automatically appear when you scroll down below the header. The menu displayed in the sticky navigation is EITHER the Header Right Navigation, or the Below Header Navigation — whichever one you're using. :)

If you do NOT want sticky navigation to display on your site, you can add the following code snippet to your theme:

.headhesive {
    display: none; }
How to add CSS code to your theme >