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 */
2 thoughts on “Change the Background Color/Text Color of the 3-Bar Menu dropdown”
Hi, I am trying to make the 3-bar menu dropdown have different colors than the regular menu (preferably, I’d like to change my link colors as they are currently white and blend into the white background). I have noticed here and elsewhere that everyone says to use “.nav-collapse .nav” coding to do this. However, with every code snippet I’ve tried, including the one above, it modifies both the regular menu as well as the 3-bar menu dropdown. Has something changed within the Customizr framework where references to “.nav-collapse .nav” now affect all menus rather than just the 3-bar menu dropdown? Thank you for your help!
Hello and thank you for your time. I m using your code but it seems that it doesn’t cover more than 1/4 of the bar that I want to. How can i change the width of it in order to fully cover that bar. To your own information the bar is now on default colour ( white) can you help me fix it? I am brand new to coding html.
I appreciate your time and patience.