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 color of the 3-bar Menu button */
.navbar .btn-navbar {
color: white;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
background-color: #ee7c2a;
background-image: -moz-linear-gradient(top, red, blue);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(red), to(blue));
background-image: -webkit-linear-gradient(top, red, blue);
background-image: -o-linear-gradient(top, red, blue);
background-image: linear-gradient(to bottom, red, blue);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='red' , endColorstr='blue' , GradientType=0);
border-color: #e16309 #e16309 #984306;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
*background-color: #e16309;
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: white;
background-color: #e16309;
*background-color: #c95808;
}
.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
background-color: #b04d07 \9;
}
.navbar .btn-navbar:hover,
.navbar .btn-navbar:focus,
.navbar .btn-navbar:active,
.navbar .btn-navbar.active,
.navbar .btn-navbar.disabled,
.navbar .btn-navbar[disabled] {
color: white;
background-color: #e16309;
*background-color: #c95808;
}
.navbar .btn-navbar:active,
.navbar .btn-navbar.active {
background-color: #b04d07 \9;
}
/* END OF Change color of the 3-bar Menu button */
11 thoughts on “Change color of the 3-bar Menu button”
Hi Dave,
I am looking into bootstrap examples and the snippet u provided.3 Bar menu option appears as soon as we minimize screen size but I need that option in my left panel by default.
Thanks,
Anamika
Hi Anamika
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
please note this should be “background: #(your colour)” not “background-color”
dont use the Hyphon
In the process of updating all my Snippets, came across your post.
In CSS, background-color is a subset of background so either should work. The snippet works for me as it is written.
Thanks for your feedback and sorry it took so long to respond.
How do I remove the white border on the menu bar, and change the front?
The full CSS for that button is:
.navbar .btn-navbar { background-color: #819A4C; background-image: linear-gradient(to bottom, #92AE57, #687C3C); background-repeat: repeat-x; border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1) inset, 0 1px 0 rgba(255, 255, 255, 0.075); color: #FFFFFF; display: none; float: right; margin-left: 5px; margin-right: 5px; padding: 7px 10px; text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25); }Changing
background-color: #819A4C;(green.css) will change the 1px border.Changing
background-image: linear-gradient(to bottom, #92AE57, #687C3C);(green.css) will change the color of the buttonwhen i am changing the menu from Aboutus. the hoghlighted Home is not changing, i mean, on about us page, About us on menubar is to be highlighted but its not happening, Only HOme raming highlghtd. I ll be glad if anyone could help!!
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And please include a link to your Site.
I have a dark colored website with white text. I’ve fixed just about everything in .css to my satisfaction (with the help of these excellent code snippets) except the background of the 3 bar drop down mobile menu is still light colored so i can’t read the menu text on a mobile device. Is it possible to adjust the background of this dropdown with .css. Thanks!
I’d suggest the Forum would be a better place to get a solution for this, with a much wider audience to help fix problems. And include a link to your Site.