current-menu-item class in CSS

Question

I have created one main Page(Home Page) and many custom links in wp-admin. All custom links are linked to sections of Home Page.

Example: Custom link About Us has a URL = #section1 and in my code I have linked it to:

<div id="section1"> Text </div>

In my CSS I have used .current-menu-item to highlight clicked link in menu:

.site-header div.nav-wrap nav ul li.current-menu-item a:link,
.site-header div.nav-wrap nav ul li.current-menu-item a:visited {

color: #fff;
text-shadow: -1px 1px 8px #ffc, 1px -1px 8px #fff;

}

When I jump to section1 only the Home Page link highlights not the About Us link. How can I fix this so that the About us Link highlights?

Answer 1

If you want to use different styling for active menu items on a single page website or automatically select correct menu items you should use a jQuery plugin like this one.