I would like to change the hamburger button color only on the homepage.
I’ve added the following css code to quick-css.
.page-id-92 .header_color .av-hamburger-inner {
background-color: #661c54 !important;
}
But that doesn’t seem to be working, is there another way?
Thanks in advance
Hey enzowillemstad,
Try to use this code instead:
.page-id-92 .av-hamburger-box span.av-hamburger-inner,
.page-id-92 .av-hamburger-box span.av-hamburger-inner:before,
.page-id-92 .av-hamburger-box span.av-hamburger-inner:after {
background-color: #661c54 !important;
}
You mentioned homepage but the link you gave isn’t the homepage? which one should it be applied? if it’s the homepage just replace .page-id-92 from the code to .home
Best regards,
Nikko
Hi Nikko,
Thanks, It works. Although the X after clicking the hamburger-icon is also in #661c54, but I guess that’s inevitable.
page-id-92 will become the homepage after the page is approved, for now a placeholder is set as homepage.
Thanks!
Hi enzowillemstad,
If you want the X to use a different color, add this CSS code and just change the background color.
.page-id-92 .av-hamburger.is-active .av-hamburger-box span.av-hamburger-inner,
.page-id-92 .av-hamburger.is-active .av-hamburger-box span.av-hamburger-inner:before,
.page-id-92 .av-hamburger.is-active .av-hamburger-box span.av-hamburger-inner:after {
background-color: green !important;
}
Best regards,
Nikko