Change the Background Color/Text Color of the 3-Bar Menu dropdown

⚠️ Code snippets might not be compatible with the latest version of your theme. Always use a child theme to customize your theme, and test your code on a staging website before migrating to production.

Where to copy/paste this code?
The simplest way is to use the Custom CSS section of the customizer option screen. If you have many customizations to make in CSS and PHP, then we strongly recommend you create a child theme. Everything you need to know about creating a child theme with Customizr here.

/* START OF Change the Background Color of the 3-Bar Menu dropdown */
/* Change 3-bar Menu background color  */
.nav-collapse .nav .nav-header {
color:              #fafafa;    /* Adjust Text Color Level 1 */
text-shadow:        none;
}
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a {
font-weight:        bold;
color:              #fafafa;   /* Adjust Text Color Level 2 */
text-shadow:        none;
}
.nav-collapse .nav > li > a,
.nav-collapse .nav > li > a,
.nav-collapse .dropdown-menu a,
.nav-collapse .dropdown-menu a {
background-color:   #666366;   /* Adjust Background Color Level 2 */
}
.nav-collapse .nav > li > a:hover,
.nav-collapse .nav > li > a:focus,
.nav-collapse .dropdown-menu a:hover,
.nav-collapse .dropdown-menu a:focus {
background-color:   #ff0000;   /* Adjust Background Hover Color Level 2 */
}
.nav-collapse .dropdown-menu > li.current-menu-item > a, 
.nav-collapse .dropdown-menu > li.current-menu-ancestor > a {
background-color:   #666366;   /* Adjust Background Color Current Item */
color:              #fafafa;   /* Adjust Text Color Current Item */
text-decoration:    none;
}
/* Remove the surrounding background */
.nav-collapse.tc-hover-menu-wrapper.in.collapse {
background-color:   #666366;   /* Adjust Background Color Level 2 */
background-color:   none;      /* Remove this line if setting different background color */
}
/* Remove the separator bars */
.tc-hover-menu.nav a {
border-bottom:      1px solid #EEEEEE;
border-bottom:      none;      /* Remove this line if setting different separator color */
}
/* END OF Change the Background Color of the 3-Bar Menu dropdown */

Leave a Reply to alexandrospiperakis Cancel reply

Your email address will not be published. Required fields are marked *

2 thoughts on “Change the Background Color/Text Color of the 3-Bar Menu dropdown”