The navigation menu of your site is one of the most important parts of your website. Whether you have one navigation bar or two your WordPress website needs a clean functioning menu.
A navigation menu needs to be laid out in such a way that your site visitors can easily navigate through your website quickly without visiting too many nested pages. We believe “less is more” with menus. We are using the Genesis Framework with a child theme, but these “basics” should work with any WordPress theme.
You will see terminology such as primary and secondary menus and or top navigation being used with your Genesis Child Theme. With these child themes some menus are placed above the header image and below, some have both and some even have a small navigation along side the header image without the typical primary or secondary menu location. In a previous blog we covered the process of creating your custom menu.
There are a few crafty things we can do with the menu items to make the navigation fun to use. Here’s some things you can do with your menu item:
- menu items can be active links, meaning they link to another page, post, category or even a pdf document
- menu items can be inactive links, meaning it’s just a sorting header for other menu items.
- menu items can be set to open in a new web browser, or same page
- menu items can be set to open an external web location that is not part of your website
- menu items can have a title attribute that displays text when the user mouses over it
- menu items can even have a combination of the above features !
Now let’s have a look at how you can set these options for your menu. First, login into your dashboard of your WordPress site. Then from the sidebar menu, select Appearance , then select Menu.
You should see this screen:
Take note that by default some options are not displayed, so lets take care of that right now, look to the top right-hand corner of the dashboard, see the label Screen Option, select it, and options window will open at the top of your page, from here you check off the items you want to see below in the Menu’s page.
Show on screen : Theme Locations | Custom Links | Posts | Pages | Categories | Tags
Show advanced menu properties: Link Target | CSS Classes | Link Relationship (XFN) Description
Theme location – depending on your theme, you will be able to choose which custom menu to associate with each location. And do not forget that you can use a custom menu in the Custom Menus widget.
Custom links – you can create a menu item that is a non active link, simple add: [ http://# ] in the URL field, with out the brackets. You can link to a pdf document you uploaded to your media library, simply by copying it’s URL and pasting it here.
Menu Modules – Can be opened/expandable and closed/collapsed and you can rearrange their order. The menu modules, as shown above are expanded, simply click on the right corner of the module title bar to open or close it.
You can further customize your dashboard by moving the modules into the order you prefer. When you mouseover the module’s title bar, notice that your mouse cursor changes to 4-arrows. Hold the left-mouse button down, drag the module to where you want to place it, then release the mouse button (ie: drag-and-drop). I know you knew that but I had to explain it. (:
[ The Screen Options allow you to choose which modules are displayed, or not displayed, in the underlying Screen. By clicking on the Screen Options tab it shows a list of the possible modules and options with a check-box next to each. Check the box for each module or option you want displayed, or uncheck the box to not display that module. Click the Screen Options tab again to close the Screen Options. Source: WordPress Codex ]
Now let’s get into the meat and potatoes of the customizing a menu item.
From the screen shot about you will see the Menu item configuration options:
Navigation Label – allows you to give your page a different name label, this will not effect the actual page name/url.
Title Attribute – the text you add in this field will be display when a user hovers over the menu item, similar to a tool tip attribute
Link Target – check this option for the menu item to open in new window/tab, leaves your site still there in it’s own browser tab.
CSS Classes – you can apply optional style classes for the menu item, I do prefer to make these edits to the style.css file!
Link Relationship (XFN) – Allows for the generation of XFN attributes automatically so you can show how you are related to the authors/owners of site to which you are linking. We have more information how this option easily assists you in obtaining your Google Authorship.
Description – this option depends on the theme as to whether it is displayed
Original – If you changed the page name in the Navigation Label field your original page source is displayed here.
Remove – removes the menu item from the menu.
Cancel – cancels the configuration of the menu item, as long as you did not hit save!
Please leave a comment below and let us know how your WordPress navigation menu turned out!
[Blog by Chrissie ]