The Navigation Bar or Menu is one of the most important elements of your website. When you have your basic website structure planned out, the Navigation Bar for your WordPress site should be one of the first things you set up.
Normally a website has more than one navigation menu. The main Menu is the top level Navigation Bar and in most cases websites have another one at the bottom of the site, known as the Footer Menu.
In this tutorial I will show you how to create a website Navigation Bar using the WordPress menu editor and the menu setup.
If you prefer to watch this tutorial on video, I created a YouTube clip for this tutorial that you can find at the bottom of this page.
What is a navigation bar?
A navigation bar is a display containing links to the most important areas, or Pages of a website. This helps visitors to navigate directly to the relevant Topic, Page or Category on the site.
Navigation bars are easily located, because they are commonly inserted horizontally, at the top of a website.
Lately more and more sites are moving away from a simple navigation bar and being very creative with their menu design.
Personally, I don’t agree with this, because the navigation menu is a key feature of any website that should be designed to maximize usability and user experience. For this reason, I recommend sticking to a standard and simple navigation bar design.
A navigation bar can be fixed in place, or it can be a sticky navigation menu. This refers to a menu bar that stays on the top of the screen even when users are scrolling downwards or upwards.
The sticky Menu bar is a convenient feature for your website visitors, since they do not need to scroll all the way back up to find the menu navigation bar if they want to navigate to another part of your site.
Usually, your website’s most important Pages or Categories, will be included in the top Navigation Bar or Menu. On the other hand, the necessary, basic pages like Contact Us, Privacy Policy etc. are shown in the Footer Menu.
How to Create a WordPress Navigation Bar
In this part I will show you how to create the main Navigation Menu for your WordPress site. Let’s jump right in.
Go to your WP dashboard and click on the APPEARANCE link in the side Menu. Now choose MENUS from the drop-down list.
Appearance > Menus
The right section in this screen is the Menu Structure. Here, next to Menu Name, change the title to ‘Navigation’ or ‘Top’. This will help you distinguish the main menu from the footer menu in the WordPress Menu editor.
In the Menu Settings at the bottom of this section, you will find the Display Location option. This sets the location of the navigation menu. Since we’re setting our main menu, we want this to be at the top, so tick the PRIMARY MENU option.
Now click CREATE MENU. (Note that if you already have a menu in place and you’re amending this section, instead of Create Menu, you will have a SAVE MENU button).
How to Add Page to Menu in WordPress
The left section of the Menu screen where you have the Add Menu Items panel is how to add a Page to Menu in WordPress.
Here you choose what shows in your Navigation Bar. You can choose Pages, Posts, Categories and Custom Links.
Click the VIEW ALL tab and select the Pages you want in to be included in your top Navigation bar. Once selected, click the ADD TO MENU button.
Keep in mind that Pages which are not yet ‘Published’ will not show up in this list of Pages for the Menu option. So, if you would like to add Pages which are not currently available here, then you need to go back to your Pages section in WordPress dashboard and set these Pages to ‘Published’.
Edit Menu in WordPress
To edit the menu in WordPress, go back to the right-side Menu Structure section. Here you will see the Pages or Posts you have just selected to be included in the Navigation Bar.
If you click on the arrow in each one, this will expand to give you some further editing options, including the Remove option to delete any Pages from the navigation Menu.
Here you can also change the Navigation Label. This is important because by default WordPress will label the menu items using the same name as the Page title, of the Pages you chose. For the Navigation Bar, however we want names that fit in well and look good.
WordPress Sub Menus
If you want your Navigation Menu to include nested menus, i.e., a dropdown sub menu underneath the main Menu label, then you will have to set this up from here also.
For WordPress dropdown menu to be applied, just drag the relevant pages under the menu structure slightly to the right in the list so that they are now nested menus.
Once you have applied all the necessary changes to your Navigation Menu click on the SAVE MENU button located in the bottom right corner of the screen.
For this tutorial I also created a YouTube clip. You can follow my process to create WordPress Navigation Menus below.
Setting the Footer Navigation Menu
To set the footer Menu, we will also be using the Menu options in WordPress dashboard. In case you already left this page, just go back to Appearance > Menus.
At the top of this page, click on the anchor text that says ‘create a new menu’. (Note that if you already have a footer Menu in place you can choose to edit it instead by clicking on the drop-down which says ‘select a menu to edit’.
Now we will set the Footer Menu by going through the same process we did for the main navigation menu.
Here’s a short walk-through:
In Menu Name next type ‘Footer’.
In Display Location choose ‘Off Canvas Menu’
Select the pages from the Add Menu Items panel on the left and click ADD TO MENU.
Here’s a screenshot of how my settings for the Footer Menu look.
Navigation Menu Done. What Next?
Now that we have the WordPress Navigation Menu set up, in the next tutorial I will explain how to create and style the Navigation Bar on your WordPress site. In this same tutorial I will be showing you how to build your Website Header, since the Navigation Bar will be included within the website’s Header.
I also have another tutorial for the Footer Section of your WordPress website where the footer menu will be located.
For my full list of WordPress tutorials please click here.
