Hosting Tutorial & Guide

How to Create and Customize A WordPress Navigation Menu

updated on Sep 08, 2016
How to Create and Customize A WordPress Navigation Menu A good navigation menu is of great importance for reducing the bounce rate and increasing page views. For those who don't know how to access other content on your WordPress site that they may be interested, the navigation menu provides them with the "directions". What's more, if you put some good content that converts in your navigation menu, you will see a boost in the sales and income.

Due to the great benefits, navigation menus are a must of any WordPress site no matter your sell or not. In below, we will show how to create and optimize WordPress navigation menus. To create a highly customized navigation menu, you may need to make use of a plugin.

Create a Simple Navigation Menu with the Default Style

The WordPress project comes with a menu manager which is easy-to-use. The menu manager works in a drag-and-drop manner, which enables you to create and edit menus quickly. Dropdown menus are also supported. The menus created with this manager use the default style built into the website theme, so you may get very few customization options.

You can access the menu manager by clicking Appearance > Menus in the WordPress admin area. And by default, you will land on the "Edit Menus" page which lists all your menus and the available options to create and edit menus. If you haven't created any menu on your website, you will get the following screen.

Edit Menus

To add your first menu, enter a menu name you like, and click the "Create Menu" button. Then you will see the following page.

Create a Navigation Menu

Now it's time to add all the menu items. There are four types of items you can add to the navigation menu, including "Pages", "Posts", "Categories" and "Custom Links".

On the left side of the screen, you are able to see all the pages that have been published on your WordPress site. To add any one of them to the menu, simply select the page, and click on the "Add to Menu" button. Then you will see the page appear under the "Main Structure" section.

Add Pages to Menu

After dealing with the pages, you can expand the posts and categories, and add the ones you want in the same easy way.

If you want to add links to third-party sites in the navigation menu, you can make use of the custom links. Simply click on "Custom Links", enter the URL of a third-party site and the link text, and then add it to the menu.

Add Custom Links to Menu

After adding all the menu items successfully, you can reorder the items freely by dragging and dropping them to the proper places.

Reorder Menu Items

When you are satisfied with the menu items and their orders, look at the "Menu Settings" section. Here you can enable the "auto add pages" feature for the menu, which is not suggested for most blogs. Besides, you are able to choose the menu location. For your first navigation menu, you can of course make it the primary menu.

Handle Menu Settings

After handling the settings, save the menu. Now you can visit your website to check the new navigation menu. The menu and all the menu items should work properly.

New Navigation Menu

If there is a need to create a dropdown, you only need to drag the submenu items on top of an existing menu item and then drop them there. This automatically adds the pages/posts/categories as a dropdown.

Add Submenu Items

When someone puts the mouse over the menu item, he/she will get a dropdown of submenus like this.

Dropdown for Menu Item

Customize the Navigation Menus on Your WordPress Site

The default WordPress menu manager is simple, and the navigation menus created with it can meet the needs of most blogs. However, the features in it are quite limited. If you'd like to create a fancy navigation menu, you may want more control and more customization options like icons, hover intent, click event, transition effects, etc.

In such a case, you will need a menu plugin like Responsive Menu. Just like the name says, Responsive Menu makes navigation menus fully responsive so that they work greatly on mobile devices. Besides, it comes with more than 70 customizable options with which you can create unique menus.

Responsive Menu

As Responsive Menu relies on the built-in WordPress menu manager, you should make sure that you have created the navigation menus you want to use at first before using the plugin. When the menus are prepared, you can install the plugin and activate it. Then, click on the new "Responsive Menu" menu item in WordPress dashboard to set up the plugin and customize your navigation menus.

In the initial setup, you will have to select the navigation menu which you want to customize, and define the breakpoint for your menu to display.

Deal with Initial Setup

After updating the setup information, you can start customizing the menu. All the changes you make to the menu, button and submenus later will only apply to the selected menu.

Responsive Menu offers a large number of options, which means you may need to invest some time in order to make the navigation menu look great in the exact way you want. Below are some of the customization options you can find under different tabs of the plugin's settings.
  • Menu: Add icons to your menu, change the width and height of the menu, add a menu title, select the title color and hover color, add animations, add a search box, and change the colors of all the backgrounds, borders and texts.
  • Button: Customize the animation, location, container size, background colors, line colors, title and image.
  • Submenus: Customize the toggle icons, icon colors, toggle button size, animations, border colors and background colors.
  • Header Bar: Create a header bar on your WordPress site with customized title, logo, content and colors.
After dealing with these options carefully, you will certainly see a big difference in the display of your navigation menus.

Customize WordPress Navigation Menu