Creating a custom navigation menu

Print Friendly

All Edublogs themes support custom menus which means you can customize your navigation menu and add a top navigation to any theme.

This allows you to easily:

  • Re-arrange, add, and remove items from the menu bar at the top of your blog
  • Change the order of pages
  • Create nested sub-menus of links (sometimes known as nested pages links or ‘drop down’ menus)
  • Publish posts to different pages on your blog using post categories.  This is handy if you want students to be able to click on a link in the top navigation for all posts published for their subject.
  • Add custom links to your navigation menu
  • Create a custom menu for your sidebar

Custom menus allow you to fully control the links that appear in your navigation menu- you can even add links to website and pages not on your blog!

Below’s an example of a custom menu with nested sub-menu and custom links:

Example of a custom menu

Most themes only support one custom menu which is displayed in the header area of your blog (your main navigation area) however some themes support multiple custom menus and can appear in different places on your blog.  For example, the theme Responsive allows you to add custom menus to the top right section of your blog, the main navigation area, a sub  header area (underneath your main navigation) and to your footer area.

Below is an example of the custom menu options on the theme Responsive:

Theme location options

You can also add custom menus to any sidebar using the Custom Menu widget (Appearance > Widgets).

Custom Menu Video Tutorial

Creating a Custom Menu

1.  Go to Appearance > Menus

Custom menu

2.  Give your menu a name – “Menu 1″ or ‘Main’ will work great!

3. Click on the ‘Create Menu‘

Click Create menu

The default menu automatically includes a custom Home link to  your homepage and any pages you’ve published.

Here’s what a default menu structure looks like on a newly created blog:

Example of default menu

4.  Create a custom link for home by adding your blog URL, the name Home and click Add To Menu.

  • When readers click on the Home link they will be taken to your front page.
  • For example the blog URL of this blog is http://help.edublogs.org/
  • You can use custom links to link to any website — which is really handy!

Create Home link

5.  Select the pages you want to add to your menu then click Add To Menu.

Click on View All to see all published pages.

 

6.  Select your categories you want to add to your menu then click Add to Menu.

Add the categories

7.  Now drag/drop the menu items to change their order in your menu.

Drag menu items

Here’s what my custom menu will look like in the main navigation area of my blog header.

Example of a custom menu

8.  Once you’ve finished changing the order click Save Menu.

Click Save menu

  • When you publish new pages they aren’t automatically added to  your custom menu.  You need to go to Appearance > Menu and add the new page to your menu.
  • Remember to click Save Menu any time you make changes to your menu!

9.  Now to display your new top navigation on your blog you just need to select Main from under the Primary Navigation drop down menu and then click Save.

Theme location

10. Visit your blog and see your new menu!

Creating New Menus

You can create as many custom menus as you want and switch between which custom menu you use for your top navigation using the drop down menu on the Theme Locations.

You create a new menu by clicking on the + tab.

Click on +

Switching to your new menu is as simple as selecting it from the drop down menu on Theme Locations.

Changing your menu

Creating Static Level Tabs

You can create static level tabs using a custom link if you just want a link name that doesn’t go to a page that exists.

For example, if you click on About in the top menu of The Edublogger you’ll see it is a static level tab used just as a placeholder for page links we’ve added underneath it.
Static Level tab

Automatically adding new pages

New pages aren’t automatically added to your custom menu when they are published.  If you would like to add new pages to your menu you need to either manually add the new pages (via Appearance > Menu) or select the option to ‘Automatically add new top-level pages’.

The ‘Automatically add new top-level pages’ option appears after you’ve created your first menu.   If you select this option than any new parent page is automatically added to your custom menu.

Auto add pages

Editing Menu Items

Besides changing the order of items in your menu, you can also custom the text and other details of any item you’ve added to your menu.

Editing a menu item is as simple as:

1.  Click on the down arrow to the right of the menu item.

2.  Once expanded, you just make the changes and then click on Save Menu.

Editing a menu item

You can modify the following:

  • Navigation label – This allows you to override the default name of the menu item to replace it with any name you want to give it.  In our example we’ve changed the name of the item from About to ‘About The Edublogger’
  • Title Attributes – Used to add custom hover text.  You might use this option to improve usability for impaired visitors using assisted devices.
  • Remove – Used to remove the item completely from the custom menu.
  • Cancel – Used to cancel any changes you have made.

Below is an example of title attribute being used:

Title attribute

You can also enable advanced menu properties in screen options.  All you need to do is click on Screen Options at the top of the page and select the items you want to show on screen.

Screen options

The most common advanced menu property you would use is Link Target.

Link Target is used to control if your menu links open in a new tab (or window) or the same window when a link is clicked.  By default, links open in the same window. 

Editing Your Custom Menus

You can edit your custom menu at any time by going to Appearance > Menu.

Once you’ve made the changes you want just click Save Menu to save your changes.

Custom Menu Widgets

You can create as many menus as you want and add them to your blog as a widget in a sidebar.

Create the menu using the steps above and then go to Appearance > Widgets to add your custom menu where you want it using the Custom menu widget.

Custom menu widget

Troubleshooting

Knowing how to create custom menus is a really handy skill because there is so much you can achieve with custom menus.   However, custom menus is a slightly more advanced blogging skills.

Please contact Edublogs Support if you need help setting up your custom menu.  We are always happy to provide assistance!

Edublogs Support Manager @suewaters on Twitter

Tagged with: ,
Posted in Appearance & Themes, Help