Hi,
The hover color is the same as the skin color. From the Customizer, go to Global Settings > Skin and change the skin colour.
Thread Starter
nuXbox
(@nuxbox)
Hi Menaka,
Yes, you right change the skin color will change the button hover color but that will also change other hover button color. In here I only want change just for hover Vertical/Hamburger Menu Button.
Is there any CSS rules can do that?
Thanks!
Try this:
.navbar .btn-toggle-nav .btn:hover {
color: #5f6f81; /* Adjust */
}
Thread Starter
nuXbox
(@nuxbox)
Hello,
I can change the hamburger menu button color with css rule:
.navbar .btn-toggle-nav .icon-bar {
background-color: #FFFFFF;
}
For hover color, I have try with css rules below:
.navbar .btn-toggle-nav .btn:hover {
color: #FF0000;
}
.navbar .btn-toggle-nav .icon-bar:hover {
color: #FF0000;
}
And also have try add !important declaration on it.
But the hover color still has not changed.
Thread Starter
nuXbox
(@nuxbox)
There is no other suggestions for this one?
I see that you’ve used one of my snippets Change color of the 3-bar Menu button. Unfortunately, this was superseded in 3.4 and I’ve not had time to replace it.
I’ll try to take another look.
Thread Starter
nuXbox
(@nuxbox)
So, it is still possible to change the hover color of 3-bar Menu button?
Just got a solution. Try this:
/* START OF Change color of the 3-bar Menu button */
.btn-toggle-nav .icon-bar,
.tc-is-mobile.tc-sn-visible .btn-toggle-nav .icon-bar,
.no-csstransforms .tc-sn-visible .btn-toggle-nav .icon-bar,
.navbar .btn-toggle-nav.hover .icon-bar {
background-color: blue; /* Adjust */
}
/* END OF Change color of the 3-bar Menu button */
Thread Starter
nuXbox
(@nuxbox)
Hi,
Thank you sir! Now I able to change color of the 3-bar Menu button with use the last CSS rules you provided.
On my site, I implement with css rule below:
/*START OF Change 3-Bar Menu Button Color*/
.navbar .btn-toggle-nav .icon-bar {
background-color: #FFFFFF;
}
.sticky-enabled .navbar .navbar-inner .btn-toggle-nav .icon-bar,
.tc-sn-visible .btn-toggle-nav .icon-bar {
background-color: #FA6F00;
}
.navbar .btn-toggle-nav.hover .icon-bar,
.sticky-enabled .navbar .navbar-inner .btn-toggle-nav.hover .icon-bar,
.tc-sn-visible .btn-toggle-nav.hover .icon-bar {
background-color: #26CE61;
}
/*END OF Change 3-Bar Menu Button Color*/
Resolved with your help! Thank you very much!
