How to Add a Navigation Menu to Genesis WordPress Template

This tutorial demonstrates how to setup a navigation menu for templates that use the Genesis Framework. Please note that the screenshots may vary from your own site depending on what version of Genesis and WordPress you have installed. In addition to the steps outlined in this tutorial, older versions of Genesis may require that you enable the Primary menu under Dashboard > Genesis > Theme Settings.

By default, Genesis Framework templates have two navigation menus called Primary and Secondary. Depending on how your template is setup, the primary menu may appear above or below the header image.

To add a menu, go to Dashboard > Appearance > Menus.

editmenus

Fill in the Menu Name as Primary and click Create Menu.

Once you create the menu, new options will appear. Check the box for Primary Navigation Menu and click Save Menu.

menuprimary_1Now you can add custom links to your navigation menu. On the left column, there are options for adding existing pages, external links, and blog categories. You will see a list of the pages and categories that exist on your blog. There is a View All link that you may need to select if you do not see all of your pages and categories. If you need to add a link to a specific blog post, you can use the Links option.

pagesmenuOnce you click Add to Menu for the links of your choice, you will see boxes appear in the right column. Click Save Menu.

primarymenu_2Sometimes you will find that you need to change the text that appears on the menu. For example, if you have a page title that is too long for the menu space, you may need to shorten the title. To do this, just click on the down arrow that appears on the right of the box. Change the text that appears under Navigation Label and click Save Menu.

nav_label

The example above would result in a basic menu with horizontal links.

menu_sample

To create a Drop-Down Menu, you can click on the boxes and drag them about 1/2 inch to the right. You will see a dotted outline as you drag the box. Remember to click Save Menu. Notice that any links that will appear as drop-down links are labeled as sub items.

dropdown_1The example above would result in a basic menu with three horizontal links and one drop-down menu link underneath the About Me link.

dropdownsample

Designer Blogs offers an add-on option to stylize your menu with different fonts, link colors, background colors, and images. To learn more about this service, please visitor our Blog Accessories page.

 


Comments

  1. I really appreciate & its really helpful.

Speak Your Mind

*