Magnolia - Set up navigation menus

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

The Magnolia theme supports five navigation menus:

  • Top Navigation = Scrolling menu at the very top of the page
  • Header Left Navigation = Menu that displays to the left of the header
  • Header Right Navigation = Menu that displays to the right of the header
  • Below Header Navigation = Menu displays below the header (not shown in demo)
  • Mobile Menu = Menu that displays on mobile devices

Add top navigation

  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 top navigation menu.
  4. At the bottom of the page, under Menu Settings, select Top Navigation Menu. Save Menu.

Click here for instructions on adding social icons to the top navigation bar.

Add header left and right navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (like "Header Left"), and then click Create Menu.
  3. Add the pages/categories you want to display to the left of your header.
  4. At the bottom of the page, under Menu Settings, select Header Left Navigation. Save Menu.
  5. Create another new menu the same way. Assign it to the Header Right Navigation menu location. Save Menu.

Add navigation below the header

This menu does not display in the demo. You can use it in conjunction with the Header Left/Right menus, or you can use it instead of the Header menus if you don't want your logo to display between the Left/Right menus.

  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 below header navigation menu.
  4. At the bottom of the page, under Menu Settings, select Below Header Navigation. Save Menu.

Set up mobile menu

Since the Magnolia theme has several menus and possible menu configurations, we created a 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.