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/
carolsanjoseAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

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

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
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
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
CSS

From novice to tech pro — start learning today.