Working with Navigation Menus

Utility Pro comes with two navigation menu areas: Primary and Footer. This section will walk you through setting up those menus areas.

Primary Navigation

The primary navigation displays right below your site header. This menu area supports nested menus (I think it looks good up to 3 levels deep – any more than that and you might need to rethink your site organization). 🙂

Go to the Menu Editor

From your WordPress dashboard, click on Apperance > Menus menu item.

Create or Modify a Menu & Assign it to the Primary Navigation Location

In the example below, I’ve:

  1. Created a menu called Main Menu
  2. Selected my Theme Location
  3. Added a couple of pages
  4. Selected another page to add (Sample Page)
  5. Click the Add to Menu
  6. Save Menu

Optional Method for Setting Menu Locations

Once you’re on the Menu page, you can click the Manage Locations tab to assign a menu to a Theme Location.

Working with the Footer Menu

In the Utility Pro demo, I’m using the Footer Navigation area to display social media links. I’ll show you how you can set up yours.

Note: You must have the Better Font Awesome plugin installed to use social media icons.

Creating the "Social Menu" for the Footer Navigation

For this step, you need to be on your Menu page within your WordPress admin.

You’ll also need to add custom Links and add them to your menu for each social media account you want to link to.

Now, what to put for those links!

  1. A URL to your social media site
  2. A Navigation Label

The Navigation Label is the tricky part. I’ll talk about that in the next step.

Customizing Your Navigation Label

Your navigation label needs to include a reference to the social media icon and (optionally) the name of the social media site. In this example, I’m using the Twitter icon along with the label "Twitter"

<i class="fa fa-twitter"></i> Twitter

The Twitter icon is included via a <i> tag with a special CSS class. That CSS class comes from Font Awesome.

Let’s look at how to get the right CSS class from Font Awesome.

  1. Go to the Font Awesome icons page to view all available fonts (you’ll see you’re not limited to just social icons!)
  2. Locate the icon you want to use and click on it (Twiter is shown in this example)
  3. You’ll be redirected to page showing you how to use the icon
  4. Note the code snippet you can copy/paste
  5. Note the link to examples if you want to modify the icon (i.e. make it larger)

Don’t Forget to Assign Your Footer Menu to the Right Location

Once you’ve set up each of your social links, check the box next to Footer Navigation Menu to ensure this menu shows in the right place on your site.

Don’t forget to Save Menu!