Clover [Genesis] - Navigation Menus

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

Navigation menu locations

The Clover theme has 4 navigation menu locations:

  • Top Navigation Menu = Menu at the top left of the page
  • Split Navigation - Left = Menu that displays to the left of the header
  • Split Navigation - Right = Menu that display to the right of the header
  • Mobile Menu = Menu that displays on mobile devices

Top Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. 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 Navigation Menu. Save Menu.

Split Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Split Left"), and 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 Split Navigation - Left. Save Menu.
  5. Create another new menu in the same manner. Assign it to the Split Navigation - Right menu location. Save Menu.

Mobile Navigation

Click here for instructions.

Navigation Social Icons

  1. Go to Appearance > Widgets.
  2. Drag a 17th Ave - Social Icons Widget into the Nav Social Icons widget area.
  3. Set the Icon Style to "Plain Icons - Small."
  4. Add your desired social links and then click Save.

Customization Options for the Navigation

Right Navigation

With the Split Navigation, you also have the option to only display the menu on the right. Doing this will automatically position your site title or logo to the left side of the header area:

Follow the same steps described in the Split Navigation section above, but do not assign any menu to the Split Navigation - Left menu position.

Scrolling/Sticky Navigation

Clover features a scrolling navigation menu that sticks to the top of the page as you scroll down. If you would like to disable this feature, go to Appearance > Customize > Clover Theme Settings. Uncheck " Enable sticky header?" There is also a setting to disable/enable the sticky header on mobile.

Shop Icons in the Top Navigation

The Clover Website Demo displays icons in front of the Shop, Cart, and Login links. If you didn't import the demo content and you'd like to add these icons, here are instructions:

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Create a new menu and add your Shop, Cart, and Login links to the menu. (And these can be called whatever you'd like – for example: Products, Checkout, My Account).
  3. At the top right corner of the Menus screen, click Screen Options.
  4. Check the box that says CSS Classes.
  5. To add the icon to each menu item, click the gray drop-down arrow that displays on the right side of the menu item. In the CSS Classes field, add your desired icon class:
  • Shop icon class: nav-icon shop
  • Shopping basket icon class: nav-icon basket
  • Account icon class: nav-icon account