How to Style WordPress Navigation Menus

Do you want to customize your WordPress navigation menus to change their colors or appearance? Your WordPress theme handles the appearance of navigation menus on your site. You can easily customize it using CSS to meet your requirements. In this article, we will show you how to style WordPress navigation menus.

Method 1: Style WordPress Menus Using a Plugin

Your WordPress theme uses CSS to style navigation menus. Many beginners are not comfortable editing theme files or writing CSS on their own.

That’s when a WordPress menu styling plugin comes in handy. It saves you from editing theme files or writing any code.

First you need to do is install and activate the CSS Hero plugin. For more details, see our step by step guide on how to install a WordPress plugin.

CSS Hero is a premium WordPress plugin that allows you to design your own WordPress theme without writing a single line of code (No HTML or CSS required). See our CSS Hero review to learn more.

WPBeginner users can use use this CSS Hero Coupon to get 34% discount on their purchase.

Upon activation, you will be redirected to obtain your CSS Hero License key. Simply follow the on-screen instructions, and you will be redirected back to your site in a few clicks.

Now you need to click on the CSS Hero button in your WordPress admin toolbar.

CSS Hero offers a WYSIWYG (What you see is what you get) editor. Clicking on the button will take you to your website with a floating CSS Hero toolbar visible on screen.

You need to click on the blue icon at the top to start editing.

Take your mouse to your navigation menu and CSS Hero will highlight it by showing borders around it. When you click on the highlighted navigation menu, it will show you the items you can edit.

In the screenshot above, it shows us menu item, menu navigation, navigation menu container, etc.

Let’s assume we want to change the text color of all items in the navigation menu. In that case, we will select menu navigation which affects entire menu.

CSS Hero will now show you different properties that you can edit like text, background, border, margins, padding, etc.

You can click any property that you want to change. CSS Hero will show you a simple interface where you can make your changes.

In the screenshot above, we selected text, and it showed us a nice interface to select fonts, change text color, size, and other properties.

As you make changes, you will be able to see them live in the theme preview.

Once you are satisfied with the changes, click on the save button in CSS Hero toolbar to save your changes.

The best thing about using this method is that you can easily undo any changes that you make. CSS Hero keeps a complete history of all your changes, and you can go back and forth between those changes.

Method 2: Manually Style WordPress Navigation Menus

This method requires you to edit your WordPress theme files. You should use it only if you are comfortable editing code and understand how WordPress themes work.

The best way to make customizations to your WordPress theme is by creating a child theme. If you are only changing CSS, then you can see our guide on how to easily add custom CSS in WordPress without changing your theme files.

WordPress navigation menus are displayed in an unordered list (bulleted list).

If you just used the following tag, then it will display a list with no CSS classes associated with it.

<?php wp_nav_menu(); ?>

Your unordered list would have the class name ‘menu’ with each list item having its own CSS class.

This might work if you have only one menu location. However, most themes have multiple locations where you can display navigation menus.

Using only the default CSS classes may cause conflict with menus on other locations.

This is why you need to define CSS class and menu location as well. Chances are that your WordPress theme is already doing that by adding the navigation menus using code like this:

<?php
        wp_nav_menu( array(
                'theme_location' => 'primary',
                'menu_class'     => 'primary-menu',
                 ) );
?>

This code tells WordPress that this is where the theme displays primary menu. It also adds a CSS class primary-menu to the navigation menu.

Now you can style your navigation menu using this CSS structure.

#header .primary-menu{} // container class
#header .primary-menu ul {} // container class first unordered list
#header .primary-menu ul ul {} //unordered list within an unordered list
#header .primary-menu li {} // each navigation item
#header .primary-menu li a {} // each navigation item anchor
#header .primary-menu li ul {} // unordered list if there is drop down items
#header .primary-menu li li {} // each drop down navigation item
#header .primary-menu li li a {} // each drap down navigation item anchor

Replace #header with the container class or ID used by your WordPress theme.

This structure will help you completely change the appearance of your navigation menu.

However, there are other classes that are automatically added by WordPress to each menu and menu item. These classes allow you to customize your navigation menu even further.

.current_page_item{} // Class for Current Page
.current-cat{} // Class for Current Category
.current-menu-item{} // Class for any other current Menu Item
.menu-item-type-taxonomy{} // Class for a Category
.menu-item-type-post_type{} // Class for Pages
.menu-item-type-custom{} // Class for any custom item that you added
.menu-item-home{} // Class for the Home Link

WordPress also allows you to add CSS classes to individual menu items from within admin area.

You can use this feature to style menu items, like adding image icons with your menus or by just changing colors to highlight a menu item.

Head over to Appearance » Menus page and click on the Screen Options button.

Once you have checked that box, you will see that an additional field is added when you go to edit each individual menu item.

Now you can use this CSS class in your stylesheet to add your custom CSS. It will only affect the menu item with the CSS class you added.

We hope this article helped you learn how to style WordPress navigation menus. You may also want to see our guide on how to add mobile-ready responsive WordPress menu.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

The post How to Style WordPress Navigation Menus appeared first on WPBeginner.

source http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/