<?php wp_nav_menu(); ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'primary-menu', ) ); ?>
style your navigation menu using this CSS structure.
// container class #header .primary-menu{} // container class first unordered list #header .primary-menu ul {} //unordered list within an unordered list #header .primary-menu ul ul {} // each navigation item #header .primary-menu li {} // each navigation item anchor #header .primary-menu li a {} // unordered list if there is drop down items #header .primary-menu li ul {} // each drop down navigation item #header .primary-menu li li {} // each drap down navigation item anchor #header .primary-menu li li a {}
You will need to replace #header with the container CSS class used by your navigation menu.
This structure will help you completely change the appearance of your navigation menu.
However, there are other WordPress generated CSS classes automatically added to each menu and menu item. These classes allow you to customize your navigation menu even further.
// Class for Current Page .current_page_item{} // Class for Current Category .current-cat{} // Class for any other current Menu Item .current-menu-item{} // Class for a Category .menu-item-type-taxonomy{} // Class for Post types .menu-item-type-post_type{} // Class for any custom links .menu-item-type-custom{} // Class for the home Link .menu-item-home{}
WordPress also allows you to add your own custom CSS classes to individual menu items.
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 in your WordPress admin and click on the Screen Options button.
http://www.wpbeginner.com/wp-themes/how-to-style-wordpress-navigation-menus/