CSS menus, working with default and custom


Sometimes when we’re working in a new web template and we apply styles to its navigation menu, we forget about the existence of default menu, page’s listing. The difference between this menu and customs is that WordPress removes the class “menu” to the default menu and assigns it to the <div> (menu’s container).

In order to apply styles in an easier way to both menus, you must create a div that contains the main menu and apply the CSS right into the container, in this case top_nav and then ul, so the CSS will be something like this:




div.top_nav ul -> the styles



As for the HTML, it can go in the following way:




<div class="top_nav">

<?php wp_nav_menu( array('menu' => 'Header Menu' )); ?>

</div>



It can also go on this way by making the container within the function’s array.

<?php wp_nav_menu( array(‘container’=>’top_nav’,

Comments and suggetiions in here


Commenting is the best way to say thanks :)

5 people showed their love and said thanks, will you?

  1. i really found a site which i need .all the info which i need i get from here.thanks for the insightful posting.

    • admin - November 24th

      Always great to see that our pieces are of great use to visitors’ projects. Best regards

  2. deuncu - November 3rd

    e CSS will only apply to the main menus.

Check The Full DesignShock Bundle