How to Create Navigation Menus

Our WordPress Themes have usually 3 Navigation Menu locations. Usually one in the Header, one in the Footer and one for mobile devices. If a Theme have more menu locations, you will learn below how to identify the locations and create menus for them.

1. Go to the Menus Settings Page
Located @ Appearance > Menus.

2. Create a Menu
If you don’t have any menus created, create one by going to Menu Name field, add a name to your menu and click on Create Menu button.

3. The Menu is created
Now your menu is created and you can start adding menu items to it. Note that the Display location section shows the available menus of your theme.

4. Add Menu Items
You can now select Pages, Posts, Custom Post Types, Custom Links or Categories from where you can add Menu items. To add a Menu item, see the example below of how pages are selected as items. Once the Menu items are selected click the Add to Menu button.

5. Assign the Menu to a location
Now that the menu is created and we want it to be displayed on the site, we need to assign it to a location. To do this, we just need to select the location(s) we want the Menu to be displayed and click the Save Menu button. Multiple locations can be selected. For example if you want to display the same menu for mobile devices as in the Header, just select both locations.

6. Adding sub items (drop-down menu items)
To create a drop-down menu item and to add sub items to it, you can simple drag a Menu item to the right, below the menu item to which the sub item belongs. Click the Save Menu button once the changes are made.

7. Menu CSS Classes and Custom Post Types
CSS Classes for Menu items are not active by default, and sometimes Custom Post Types (Projects in our Themes) are inactive as well. To activate them, in the top-right of your page, go to Screen Options tab and make sure that CSS Classes and Projects are checked. Now you can add Projects to your Menu as well.

8. Adding highlight class to a Menu item
You may want to have a Menu item that pops up from the others, a Buy Now link or a link to a special place on your site. With our Themes you can simply achieve this by simple adding the highlight class.
To do this, you need to click on the little arrow in the right-side of the Menu item and write highlight in the CSS Classes field. Click the Save Menu button once the changes are made.

9. Create more Menus
You can create more menus repeating the process described above. Once you have more Menus created you’ll have a drop-down section to select the Menu you want to edit. Each Menu will have it’s name and the locations to where is assigned in the select field.

10. Manage Locations Tab
From the Manage Locations tab you have the possibility to assign / change the Menu locations without editing each Menu individually.

Author: Stefan I

I love creating / tweaking WordPress themes and plugins. Father of a beautiful daughter, living in Bucharest. Glad to see you dropping by!