• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 318
  • Last Modified:

css on current page in menu

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?

site:  http://www.callcarol.com/sample1/
0
carolsanjose
Asked:
carolsanjose
  • 2
1 Solution
 
vignes_waranCommented:
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="http://www.callcarol.com/sample1/">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.
0
 
Jesse MatlockUX EngineerCommented:
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;
	background:#07689f;
        color:#fff;
}

Open in new window


to:

#access .current_page_item > a, #access .current_page_ancestor > a,
#access .current-menu-parent {
	font-weight: bold;
	background:#07689f;
        color:#fff;
}

Open in new window


Try that and see if that works (I've tested it, but pls confirm ;D)
0
 
carolsanjoseAuthor Commented:
Thanks for giving me the exact line to add to my css file.  It only took 30 seconds to fix.  

Thanks!
0
 
Jesse MatlockUX EngineerCommented:
Excellent.. glad that worked for you .. pls let us know if you need any further assistance.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now