1

The website I am working on has a one-page architecture with a couple of static pages.

The main issue is that when I click menu item from a static page (construction of that menu item in my WordPress custom menu looks like this: http://example.com/#about, tried also: /#about and #about only) it highlights all menu items.

This problem occurs only when I am trying to get to one-page section through a static page. Is there a solution to this, how to highlight only one active section when I click on it from a static page? Below I present two CSS declarations responsible for colour change.

CSS

#header-menu #mega_main_menu > .menu_holder > .menu_inner > ul > li >
.item_link > .link_content > .link_text, #header-menu .mega_main_menu > 
.menu_holder > .menu_inner > ul > li >
.item_link > .link_content > .link_text {
height: auto;
font-size: 12px;
text-transform: uppercase;
color: #45464b;
padding: 0 20px;
line-height: 80px;
}

#header-menu #mega_main_menu > .menu_holder > .menu_inner > ul > li.current-
menu-item >
 .item_link > .link_content > .link_text, #header-menu #mega_main_menu > 
.menu_holder > .menu_inner > ul > li.current-menu-parent > .item_link > 
.link_content > .link_text, #header-menu #mega_main_menu > .menu_holder > 
.menu_inner > ul > li.current-menu-ancestor > .item_link > .link_content > 
.link_text, #header-menu .mega_main_menu > .menu_holder > .menu_inner > ul > 
li.current-menu-item > .item_link > .link_content > .link_text, #header-menu 
.mega_main_menu > .menu_holder > .menu_inner > ul > li.current-menu-parent > 
.item_link > .link_content > .link_text, #header-menu .mega_main_menu > 
.menu_holder > .menu_inner > ul > li.current-menu-ancestor > .item_link > 
.link_content > .link_text {
color: #0ccfa8;
}
0

As far as I remember WordPress doesn’t operate with concept of anchors in its navigation menus. All of your anchors are on the same page, which is all WP cares about.

Since logically you would also want highlight to work when moving within the page without reload, your options here are likely limited to stripping native active classes from the source and implementing it client–side with JavaScript.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.