Mia - Set up navigation menus

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

The Mia theme supports four navigation menus: Primary Navigation Menu, Secondary Navigation Menu, Footer Navigation Menu, and Header Right Navigation Menu.

  • Primary Navigation Menu = The menu at the very top of the page
  • Secondary Navigation Menu = The menu underneath your site title or logo. This menu is not shown in the demo.
  • Header Right Navigation Menu = This menu displays to the right of your site title or logo. This menu is not shown in the demo.
  • Footer Navigation Menu = The menu at the bottom left corner of your website

Add primary/top navigation

  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 Primary Navigation Menu. Save Menu.

Add secondary navigation

See an example of the secondary navigation menu here.

  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.

Add header right navigation

See an example of the Header Right menu here.

  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.

Add footer navigation

  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

Your menus will automatically collapse into a hamburger menu (3 lines) on screens below 1021px wide. 

Sticky mobile navigation

If you'd like your navigation menu to stick on mobile (i.e. remain visible as you scroll down), follow the instructions below:

Note: This method can only be used if you are using the Top Navigation menu and no other menus.
  1. Click here and copy the code.
  2. Go to Appearance > Customize > Additional CSS.
  3. Paste the code in the box. Click Publish to save.