Building and Displaying Custom Menus

Creating a custom menu:

Step one- Go to Appearance > Menus. Under the Edit Menus tab select the menu you would like to customize or choose to create a new one. slide 1

 

Step two-  Add pages to your menu. Simply select the pages you would like and click Add to Menu. You can also add categories, links, posts, etc. These can be used as sub-items (example to follow).

 

 slide 3

 

Step 3- Go ahead and name your menu and save it, but also remember to repeatedly save your menu as changes are made (The name of the menu will not appear on your page.). You can change the order of your menu items simply by dragging and dropping.

slide7

 

Step 4- To add sub-items to your menu select the items, categories, etc. you would like and click Add to Menu (as done in step 2). To make the items sub-items drag them slightly to the right under the page you would like. You can make sub-items for sub-items by dragging even further to the right as shown below under the Shop page.

slide 5

Step 5- By clicking the arrow on the far right side of each menu item you are given the following options:

Navigation Label: Here you can enter a custom label that will override the default name of the menu item.

Title Attribute -This is an optional custom text that will appear when hovered over.

Here you can also move the menu item or remove it completely.

 

slide 6

Step 6 – Fullwidth Multi Column Dropdowns.

By clicking on the right arrow of your menu item you are given options. “Enable Fullwidth Sub-Menu” is one of those options. You can click the checkbox for this and select how many columns you would like to have.

 

menu_tutorial

Each submenu directly below the item with “Enable Fullwidth Sub-Menu” checked will be the column title. Then each submenu item below the column title will fill the column. For an example look at the “featured” menu item here: http://themes.kadencethemes.com/virtue-premium/

The admin layout for that site looks like this:

menu_tutorial_02

 

*Note to add more advanced menu properties, click the Screen Options tab at the top right of your Menus page and select the boxes you would like to add. This tab also allows you to select what pages are shown on the screen.

slide 10

 

Displaying Your Menu

At the bottom of the Menus page, you can select whether or not you would like new pages to automatically be added as sub-items to your menu. This is also where you can select where you would like your menu to be displayed.

**Note if your Mobile Navigation is not selected your menu will not appear on mobile devices.

slide 8

 

You can also switch over to the Manage Locations tab at the top of your Menu page and chose the menu you would like to use for each navigation.

slide 9

 

Customizing your Menu

By navigating to Theme Options > Menu Settings you are given the options to change the font, color, hover color, etc. of each of your menus.

menu_settings