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.



  • I meant to say hello to all before posting, so.... HELLO to all! – Siluvatar Sep 12 '13 at 14:02

wp_nav_menu, unless altered by a filter, adds a current-menu-parent and a current-menu-ancestor class to the menu items. It sounds like you want the "ancestor" one.


  • I'm going to try it out. THank you for your reply. – Siluvatar Sep 12 '13 at 15:33
  • It doesn't seem to do the trick. no changes at all... – Siluvatar Sep 12 '13 at 16:03
  • Then I suspect your CSS is wrong. Per the faq, we don't really deal with CSS here. – s_ha_dum Sep 12 '13 at 16:52
  • ok thanks, i hadn't read this. sorry for the inconvenience. – Siluvatar Sep 12 '13 at 19:04

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.