I am using Amadea theme. 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;
}

Read more here: WordPress- OnePage + Static pages nav inactive items highlighted


Solution:

If you know the solution of this issue, please leave us a reply in Comment section, to update the question.


Wordpress related questions and answers: