Navigation menu colour

Hello there,

In order to change background color on hover on drop-down items you can add this code to your child theme style.css or in plugin like “Simple Custom CSS”:

@media screen and (min-width: 783px) {
    .primary-navigation li a:hover,
    .primary-navigation li:hover a {
        background: red; /* enter your color */
    }
}

Regards

Great 🙂

In order to change that you would need to add this:

.site-navigation.toggled-on a {
   background: blue; /* for all items */
}

@media (max-width: 767px) {
.nav-menu .current_page_item > a, .nav-menu .current_page_ancestor > a, .nav-menu .current-menu-item > a, .nav-menu .current-menu-ancestor > a {
    background-color: yellow;  /* for active (current) item */
}
}

@media (max-width: 767px)  {
	ul.nav-menu > li > a:hover,
	ul.nav-menu > li > a:focus,
	ul.nav-menu > li > a:active {
		background-color:red;  /* hover for top level items */
	}
}

@media (max-width: 767px) {
ul.sub-menu > li > a:hover, ul.sub-menu > li > a:focus, ul.sub-menu > li > a:active {
    background-color: tomato;  /* hover for sub level items */
}
}

Regards.