How to style a WordPress navigation menu bar using CSS


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:
// functions.php
register_nav_menus( array(
‘main’ => __( ‘Main Menu’, ‘mytheme’ ),
) );
?>