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;
}