Burger menu color change

Support
#1

How can change the color of the burger menu ? see image. Is it possible to make the burger menu a gradient color?

#2

Hi @rotation,

Thanks for reaching out.

It could be possible, but may not fully work on other browsers like Safari. But you can add this CSS to Theme Options > CSS

#x-btn-navbar {
background: transparent;
}
#x-btn-navbar .x-icon-bars {
    background: rgb(41,206,45);
    background: -moz-linear-gradient(left, rgb(41,206,45) 0%, rgb(157,255,140) 100%);
    background: -webkit-linear-gradient(left, rgb(41,206,45) 0%, rgb(157,255,140) 100%);
    background: linear-gradient(to right, rgb(41,206,45) 0%, rgb(157,255,140) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

But again, it may not work on other browsers.

Thanks!

#3

I would like the burger menu to be rgb(184, 0, 0) or hex #B80000. then when you click it it changes to yellow. Lets not do a gradient just a display color or rgb(184, 0, 0) or hex #B80000 . then a yellow color as you click it. I tried another code but its not working I need it to work.

Is this posible.

Thanks

#4

Hey @rotation,

This would require custom CSS as this is not a theme feature by default and is outside of our support scope, but we will do our best to help you getting started with the customization but we will not be able to implement it. First remove the previous customization related to burger menu so it doesn’t conflict with the new code and then add the following code in your child theme’s style.css file:

.masthead .x-navbar .x-btn-navbar {
    color: rgb(245, 222, 68);
    box-shadow: none;
    border: none;
    text-shadow: none;
}

.masthead .x-navbar .x-btn-navbar.collapsed {
    color: rgb(184, 0, 0);
}

.masthead .x-navbar .x-btn-navbar .x-icon-bars {
    background: transparent;
    -webkit-text-fill-color: inherit !important;
}

Here are some related links for further reading, this could help you in finding and implementing some CSS fixes:

Don’t forget to clear all caches including your browser’s cache after adding the code. Let us know how this goes!

#5

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.