How to Design Navigation Menus in WordPress

Navigation menu is one of the first elements which draw the attention of site viewers. So why don’t you change the appearance of your menu to make the navigation more interesting? Simply, you can change the colors or add some eye-catching looks. Of course, your WordPress theme have to manage the look of navigation menus. Thus, you can add CSS to customize it to meet your requirements. And in this post, I will show you an in-depth guide on how to design navigation menus in your WordPress site.

There are two common ways to style your navigation menus: using WordPress plugins, and adding custom code. Let’s get started now!

Method 1: Using a Plugin to Design Navigation Menus

All of WordPress themes use CSS to customize the navigation menu. However, not all of us are comfortable to edit the theme files or add CSS on this, or good at coding knowledge. Don’t worry about it. WordPress offers tons of effective plugins to help you with this task. They save you from editing theme files and adding any code. Especially, you just install and activate it in a matter of minutes, and then it will complete the task successfully.

Among a wide range of WordPress plugins, the CSS Hero plugin is highly recommended for you. This is a premium plugin which enables you to style your own WordPress theme without adding any single line of code. This means no HTML and CSS here. With this plugin, you can also receive more than 30% discount on the purchase.

Using the CSS Hero plugin has never been easier. Once activation, you will get the CSS Hero License key. Next, you just follow the on-screen instructions, and redirect back to your site in a few clicks.

After that, on your WordPress admin toolbar, you will see the CSS Hero button, click on this. 1

CSS Hero provides you a WYSIWYG (What you see is what you get) editor. Now click on this button, and it will take you to your site with a floating CSS Hero toolbar visible on the screen.2

At the top of the editing screen, you need to click on the blue icon.

Now start to style your navigation menu. Take your mouse around the menu, and this will highlight each element by showing borders around it. Clicking on this will show all options that you can edit.  3

They may be menu item, menu navigation, navigation menu container, and much more. If you want to change the textcolor of all items in your navigation menu, you choose the menu navigation that affects the entire menu.

In addition, CSS Hero will show you more properties such as editing text, background, border, margins, padding, so on.4

To change them, click on the item which you want to style. Especially, the CSS Hero offers a simple interface, ensuring the easiest changing process for you.

For example, the picture below show the nice interface when changing text. Select your desired fonts, change text color, size and other options.5

Once making change, you can see them live on the theme preview.6

Remember that once you are satisfied with all changes, you have to click on the save button to store all of them.

On top of that, with this plugin, you can undo any changes that you have done. Because CSS Hero stores a complete history of your changes, you can go back and forth between changes.

Method 2: Manually Style WordPress Navigation Menus

If you master at coding skills and themes, this method is for you. Because it requires you to edit theme files.

To make customizations to your WordPress theme, you should create a child theme. So you can add custom CSS in WordPress without changing your theme files.

WordPress navigation menus are placed in an unordered list.

It will be on a list with no CSS classes associated with it, if you used the following tag:

1 <?php wp_nav_menu(); ?>

The unordered list may be named “menu” with each list item containing its own CSS class.

This can work if you have only a menu location. But, many themes have multiple locations that you can show navigation menus.

If you only use the default CSS classes, it may conflict with menus on other locations. This is the reason why you need to define the CSS class and menu locations as well. Chances are that your theme is already doing that by adding the navigation menus with code like this:

1 <?php

 

2     wp_nav_menu( array(

 

3         ‘theme_location’ => ‘primary’,

 

4         ‘menu_class’     => ‘primary-menu’,

 

5          ) );

 

6 ?>

This tells WordPress where the theme displays primary menu. Also, it adds a CSS class primary-menu to the navigation menu.

Now, you can design your own navigation menu using the following CSS structure.

1 #header .primary-menu{} // container class

 

2 #header .primary-menu ul {} // container class first unordered list

 

3 #header .primary-menu ul ul {} //unordered list within an unordered list

 

4 #header .primary-menu li {} // each navigation item

 

5 #header .primary-menu li a {} // each navigation item anchor

 

6 #header .primary-menu li ul {} // unordered list if there is drop down items

 

7 #header .primary-menu li li {} // each drop down navigation item

 

8 #header .primary-menu li li a {} // each drop down navigation item anchor

Don’t forget to replace #header with the container class or the ID your theme uses.

With this structure, you can completely change the appearance of your menu. But some classes are automatically added by WordPress to each menu and menu item. Classes below let you customize your menu even further.

1 .current_page_item{} // Class for Current Page

 

2 .current-cat{} // Class for Current Category

 

3 .current-menu-item{} // Class for any other current Menu Item

 

4 .menu-item-type-taxonomy{} // Class for a Category

 

5 .menu-item-type-post_type{} // Class for Pages

 

6 .menu-item-type-custom{} // Class for any custom item that you added

 

7 .menu-item-home{} // Class for the Home Link

In addition, WordPress allows you to add CSS classes to each menu item within the admin area. You can take an advantage of this to style menu items. For example: adding image icons with your menus, changing colors to highlight a menu item.

Go into Appearance > Menus page, and then click on the Screen Options button. 7

Once you have a tick on that box, an additional field is added when you edit each menu item.8

Now you can add this CSS class in your stylesheet. This only change the menu item with the class you added.

That’s all when you want to design your own navigation menus. I hope that this guide can help you more on styling menu. If you liked this, please share it with your friends. Thank you for reading!

 

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s