I’m a begginer in php and css.
I would like to know how to keep an top-menu item underlined while navigating on child pages.
Here is my layout:
I have a navigation menu, listing all my parent pages (main pages). Alls these pages will have a unique xxxxx*php file on which their respective childs will be created as well.
On each of these xxxx*php file, there will be, what will look like, a sub menu. declared in my functions.php file. to each xxxxx.php file it’s own sub menu.
I know how to underline the current page menu item in css. but how do i keep the top menu item (main navigation item ) underlined while on the child pages…
I hope i have made myself clear.
In my fonctions.php file here is how i registered my personnal menus:
function register_my_menu()
{
register_nav_menus( array(
'home_menu' => __('Home Menu'),
'general_menu' => __('General Menu'),
'produit_menu' => __('Produit Menu'),
'pro_menu' => __('Pro Menu'),
'Stage_menu' => __('Stage Menu')
) );
This i how i call the menus on each main pages (xxxxx.php)
<div id="page_title"><a>Atelier de souffleur de verre:</a></div>
<div> <?php wp_nav_menu( array( 'theme_location' => 'general_menu', 'container_class' => 'atelier_menu' ) ) ; ?> </div>
I create these menus in my admin page and write down the items i want to appear in my menu. It work fine, but as soon as i click on one of these child pages, my main menu item looses it’s “underline” text décoration.
Here is my css:
.current-sub-menu-item a { text-decoration:underline !important; }
.current-menu-item a { text-decoration:underline !important; }
.current-parent-page-item a { text-decoration:underline !important; }
/**Menu personnalisés**/
#page_title {text-decoration:none ;font-size:12px;color:#000000;}
#page_title a {text-decoration:underline ;font-size:12px;color:#000000;}
.atelier_menu { position:relative;left:160px;top:-27px;padding: 5px 0; }
.atelier_menu ul {list-style-type: none; }
.atelier_menu ul li { float: left; font-family:Times; }
.atelier_menu ul li a { display: block; padding: 5px 15px; color: #000000; font-size: 12px; text-decoration: none;}
Any help would be greatly appreciated.
Regards,
Siluvatar.
wp_nav_menu
, unless altered by a filter, adds acurrent-menu-parent
and acurrent-menu-ancestor
class to the menu items. It sounds like you want the “ancestor” one.http://codex.wordpress.org/Function_Reference/wp_nav_menu#Menu_Item_CSS_Classes