asked on

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/

vignes_waran

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.

ASKER CERTIFIED SOLUTION

Jesse Matlock

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

carolsanjose

ASKER

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

Thanks!

Jesse Matlock

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