Clover - 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:

  • Primary = Menu to the left of your site title/logo
  • Secondary = Menu to the right of your site title/logo
  • Mobile = Menu that displays on mobile devices only
  • Footer = Not shown in the demo, but can be added to the footer bar in place of the social icons

Clover also has a custom Top Bar menu, which is not a traditional menu location. Scroll down for more info and setup instructions!

Primary Navigation

  1. In your WordPress dashboard, go to Appearance > Menus.
  2. Click Create a New Menu. Give your menu a name (such as "Left 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 "Right 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.
Note: This menu is not used in the demo, and it won't display on your site without adding a menu element to your footer. If you'd like to add the menu to your footer, go to Appearance > Customize > Footer and use the Footer Builder to add the menu where you'd like.

Top Bar Navigation

Kadence Free supports just two main navigation locations (Primary and Secondary). With Clover's split navigation taking up these two locations, we created a custom third menu that you can insert into your header using a shortcode. Don't worry, it's super easy. And if you imported the demo content, it's even easier!

Top Bar: If you imported the demo content

If you imported the demo content, the Top Bar will be all set up for you automatically! To change the links in the Top Bar, go to Appearance > Menus > Top Bar Menu.

Note: Do NOT change the menu name. It's crucial that the menu name remains "Top Bar Menu." If you do change it by mistake, no worries – just change it back to the correct name and it will display again.

Top Bar: If you did not import the demo content

First of all, you should definitely have imported the demo content. 😉 The demo should be imported on ALL sites, new or existing. But let's say you didn't, or maybe you removed the Top Bar shortcode and now you want to add it back.

Adding the shortcode

  1. Go to Appearance > Customize > Header. The Kadence Header Builder will appear at the bottom of your screen.
  2. In the Top Row, in the left column, click the + icon to add a new Header element. Select the HTML element.
  3. An HTML Editor box will appear on the left side of your screen. In that box, add: [top_bar_menu]. Save.

Creating the menu

  1. Go to Appearance > Menus > Create a New Menu.
  2. Give the name this name: Top Bar Menu. It's crucial that your menu has this exact name, as this is what your theme will look for to display the menu.
  3. Add your links to the menu, then save. The menu should now be displaying inside the Top Bar area on your site!

Top Bar: Shop Icons

The 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

Top Bar: Other Icons

Kadence Free does not support icons in the navigation (the three icons above are custom coded into Clover). If you'd like to use different icons, you'll need Kadence Pro and their Ultimate Menu feature.

Top Bar: Remove or Replace Menu

Don't want to display a menu inside the Top Bar? No problem – go to Appearance > Customize > Header. The Kadence Header Builder will appear at the bottom of your screen. Inside the Header Builder panel, find the HTML element and click the X icon to remove it.

Prefer to replace the menu with text or an announcement? Super easy! Go to Appearance > Customize > Header. The Kadence Header Builder will appear at the bottom of your screen. Inside the Header Builder panel, find the HTML element and click the settings wheel icon. Delete the [top_bar_menu] shortcode and add your own custom text to the box!