Successfully added active state to nav menu but not active color
My main navigation menu is managed by WordPress as shown below. I wanted to change the active state when someone clicks on a link in the menu, creating an add: background-color and color to style it.
Clicking on the menu item successfully displayed the background color change, the original text color did not change to the active state.
header.php
<?php if ( has_nav_menu( 'primary' ) ) : ?>
<nav class="main-navigation" role="navigation">
<?php
// Primary navigation menu.
wp_nav_menu( array(
'menu_class' => 'nav-menu',
'theme_location' => 'primary',
) );
?>
</nav><!-- .main-navigation -->
<?php endif; ?>
JQuery
jQuery(document).ready(function(){
jQuery('ul li a').click(function(){
jQuery('li a').removeClass("active");
jQuery(this).addClass("active");
});
});
CSS (snippet)
a {
background-color: transparent;
}
.active{
background-color: #242424;
color: #ffffff;
}
a:active,
a:hover {
outline: 0;
}
.sidebar .main-navigation a {
display: block;
padding: 12px 0;
position: relative;
text-decoration: none;
}
.sidebar .main-navigation ul {
list-style: none;
margin: 0;
}
.sidebar .main-navigation ul ul {
display: none;
margin-left: 12px;
}
.sidebar .main-navigation ul .toggled-on {
display: block;
}
.sidebar .main-navigation li {
border-top: 1px solid rgba(0, 0, 0, 0.1);
position: relative;
}
.sidebar .main-navigation .nav-menu {
border-top: 1px solid rgba(0, 0, 0, 0.1);
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.sidebar .main-navigation .nav-menu > ul > li:first-child,
.sidebar .main-navigation .nav-menu > li:first-child {
border-top: 0;
}
.sidebar .main-navigation .menu-item-has-children > a {
padding-right: 48px;
}
Navigation menu rendered by html: -
<button id="sidebar-toggle" class="sidebar-toggle"></button>
<nav class="main-navigation" role="navigation">
<div class="menu-top-menu-container">
<ul id="menu-top-menu" class="nav-menu">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-18"><a href="http://example.com/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-19 active "><a href="http://example.com/about">About</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://example.com/contact">Contact</a></li>
</ul>
</div>
</nav><!-- .main-navigation -->
+3
source to share
3 answers
Based on your HTML provided by you, you should do it like below: -
.main-navigation ul > li.active{ background-color: #242424;}
.main-navigation ul > li.active >a{color: #ffffff; /*if not worked then add !important and check once*/}
Example: -
.main-navigation ul > li.active{ background-color: #242424;}
.main-navigation ul > li.active >a{color: #ffffff; /*if not worked then add !important and check once*/}
<button id="sidebar-toggle" class="sidebar-toggle"></button>
<nav class="main-navigation" role="navigation">
<div class="menu-top-menu-container">
<ul id="menu-top-menu" class="nav-menu">
<li id="menu-item-18" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-home menu-item-18"><a href="http://example.com/">Home</a></li>
<li id="menu-item-19" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-8 current_page_item menu-item-19 active "><a href="http://example.com/about">About</a></li>
<li id="menu-item-21" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-21"><a href="http://example.com/contact">Contact</a></li>
</ul>
</div>
</nav><!-- .main-navigation -->
+1
source to share
No need to write any jquery code to set the active class in Wordpress navigation. Bydefault Wordpress provides a class current_page_item
for the active navigation element, the following CSS can be used for that.
.current_page_item {
background-color: #242424;
color: #ffffff;
}
OR
.current_page_item a {
background-color: #242424;
color: #ffffff;
}
0
source to share