Harper - Navigation menus

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

Navigation menu locations

The Harper theme has 4 navigation menu locations:

  • Primary = Menu to the right of your site title/logo
  • Secondary = Menu at the top left corner of your website
  • Mobile = Menu that displays on mobile devices only
  • Footer = Menu at the bottom left corner of your website

Primary Navigation

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

Secondary Navigation

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

Mobile Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Mobile Menu") and click Create Menu.
  3. Add the pages/categories you want to have in your mobile navigation menu.
  4. At the bottom of the page, under Menu Settings, select Mobile. Save Menu.
The content of the mobile menu "off canvas" area can also be fully customized! Click here.

Footer Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Footer Menu") 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. Save Menu.

Sticky Navigation

By default, the sticky navigation appears on scroll and contains your site title, primary navigation, and social icons. There are several ways you can customize the sticky navigation.

  • Disable sticky navigation: Appearance > Customize > Header > Sticky Header > Enable Sticky Header? > No
  • Change the background color: Appearance > Customize > Header > Sticky Header > Design > Sticky Header Background
  • Choose a separate logo for sticky navigation: Appearance > Customize > Header > Sticky Header > Different Logo for Stuck Header
  • Adjust the position of the navigation within the sticky menu: If you have an extra long site title, it may push the navigation further to the right than you'd like. You can grab this code snippet and paste it at Appearance > Customize > Additional CSS, then adjust the -50px value as needed.