Writing styles for navigation menus nowadays is mostly a routine job; after all, CSS has made strides in the last few years, we can even mimic hover-intent on menus without any JavaScript at all (a topic which we’ll cover on a dedicated tutorial). WordPress isn’t much different, the native menu functionality is powerful and versatile enough to give us with exactly the HTML we’d require, plus a few more options for providing a better user experience to our users. The aim of this post is to take you through those and provide a complete solution on how to style a native WordPress navigation menu. Adding a WordPress menu to our website Displaying a nav menu on your WordPress site is generally very simple, it only takes a couple of lines: <?php // functions.php register_nav_menus( array( 'main' => __( 'Main Menu', 'mytheme' ), ) ); ?> <?php // somewhere in header.php ?> <header class="header"> <nav class="nav"> <?php if ( has_nav_menu( 'main' ) ) { wp_nav_menu( array( 'theme_location' => 'main-menu', 'container' => '', 'menu_class' => 'navigation-main',
from
https://managewp.org/articles/16696/how-to-style-a-wordpress-navigation-menu-bar-using-css