css on current page in menu

Posted on 2011-10-29
Last Modified: 2012-05-12
On the menu tab, the current page is highlighted in the menu bar as a different color from the rest of the menu.  This is good.  BUT, when I go to a child page in the drop down menu, the parent page doesn't stay highlighted.  

Will you advise me on how to edit the css so the parent page stays highlighted when viewing a page in the drop down menu?

Question by:carolsanjose
    LVL 4

    Expert Comment

    I reviewed the webpage and noticed that the current page related classes are not included in the menus of the child pages.

    For example, in the Home page the Home class is like below.

    <li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-18 current_page_item menu-item-21"><a href="">Home</a></li>

    In the above code, you can see the "current_page_item" in the class attribute. Like wise, you just need add this class to the appropriate menu <li> tag class attribute in the child pages.

    For example i've just added the above class to the second menu "About the Fund".
    <li id="menu-item-101" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-101 current_page_item"><a>About the Fund</a>

    I hope this helps.
    LVL 8

    Accepted Solution

    It might be a little easier than that.. you can target the parent as well, but changing line  408 in your style.css from:

    #access .current_page_item > a, #access .current_page_ancestor > a {
    	font-weight: bold;

    Open in new window


    #access .current_page_item > a, #access .current_page_ancestor > a,
    #access .current-menu-parent {
    	font-weight: bold;

    Open in new window

    Try that and see if that works (I've tested it, but pls confirm ;D)

    Author Closing Comment

    Thanks for giving me the exact line to add to my css file.  It only took 30 seconds to fix.  

    LVL 8

    Expert Comment

    Excellent.. glad that worked for you .. pls let us know if you need any further assistance.

    Featured Post

    How to run any project with ease

    Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
    - Combine task lists, docs, spreadsheets, and chat in one
    - View and edit from mobile/offline
    - Cut down on emails

    Join & Write a Comment

    Introduction If you're like most people, you have occasionally made a typographical error when you're entering information into an online form.  And to your consternation, the browser remembers the error, and offers to autocomplete your future entr…
    This article describes how to create custom column layout styles for Bootstrap. The article uses 5 columns to illustrate the concept, but the principle can be extended to any number of columns.
    In this tutorial viewers will learn how add a scalable full-width header using CSS3. Create a new HTML document with an internal stylesheet. Set a tiled background.:  Create a new div and name it Header. Position it with position:absolute at the top…
    In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at Browse or search based on font properties or name to find a suitable font for…

    730 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    15 Experts available now in Live!

    Get 1:1 Help Now