Viewing 13 posts - 1 through 13 (of 13 total)
  • Author
  • #1458

    I think this issue may have been addressed in another post but it was in German. :-)

    Is there a way to retain the CSS Class (.current-menu-item a strong) on the top level menu item when a sub-level page is chosen from a drop-down.

    Specifically, if I have a menu “Portfolio” on the top-level and I go to that page, the the menu item “Portfolio” is styled using the class mentioned above. But if I go to a sub-level (child) page (let’s say: “Web Design”) of “Portfolio” – then the “Portfolio” menu item is no longer highlighted as I am now in “home/portfolio/web-design

    Anyway to maintain that highlight through a new CSS declaration or some change in the JS controlling the menu?



    Add following code to your style1/2/3.css:

    ul li.current_page_item a,
    ul li.current-menu-item a,
    ul li.current-page-ancestor a,
    ul li.current-post-ancestor a
    color: #222222;

    This should do the trick.


    Hey Dude (great handle by the way) –

    Unfortunately those aren’t getting it done. It looks like that element (when a subpage is active) is being controlled by this CSS declaration in the style.css sheet on line 214 or so:

    .nav li a strong {display:block;font-size:12px;font-weight:normal;}

    And I can’t get closer in the cascade to effect this — any thoughts?

    PS: I put a mod on the declaration above to change the font size, but otherwise it’s stock from the default theme.

    Thanks, Scott


    Do you use the menu manager to create your menus?


    Yes I do.


    Any help on this?


    Sry I made a mistake (used the css code from another template). Please try the code above.


    I did use that code – it has no effect on the parent menu item when on a sub page.

    I’ve also tried various classes as tests with no luck. The parent menu item is being controlled by a css declaration in the default (style.css) on the strong tag when a user is on a sub-level page. I’m very experienced with css and the specificity of the cascade — just can’t seem to get this.

    I would have expected this to be a pretty basic function of a multi-level menu


    I use the same css code on my site too and there it works without problems. Can you give me a link please


    Here you go:

    If you go to the “Portfolio” parent page – the menu item “Portfolio” is bold. If you go to a sub-page the parent page menu item goes back to normal font-weight. I can’t figure out the cascade.

    Thanks for your help.


    PS: Obviously we’re still working out design changes, just using dummy content right now


    Please add the css code above to your style1.css. I couldn’t find it in style.css and style1.css.

    The css should work as i.e. the portfolio link has all necessary classes:

    <li id="menu-item-212" class="menu-item menu-item-type-post_type current-page-ancestor current-menu-ancestor current-menu-parent current-page-parent current_page_parent current_page_ancestor"><a href=""><strong>Portfolio</strong><span> </span></a>



    I finally figured it out. This is the proper CSS declaration to style a parent menu item when a child menu item is active. This might be of service to someone else.

    #top .nav .current-menu-parent a strong { insert however you want to style the element here; }


    Great. Your code styles the page name but not the description below. If you want to color the whole link you need to remove the strong attribute.

Viewing 13 posts - 1 through 13 (of 13 total)

The topic ‘Maintain main menu highlight when a child page is selected from the drop-down’ is closed to new replies.