Change color of hamburger icon in mobile

Hi Dwight,

Changing the color can be done w/ this CSS:

@media (max-width:768px){
.menu-toggle:before {
    color: red;
}
}

But you may want to consider adding some sort of vignette or see-through gradient to improve contrast between the header and its background.

Hello Elvin,
Many thanks, People were unable to see the hamburger on mobile.

A gradient or a vignette sounds good, I just have no idea how to do that.
How would I add a gradient or vignette?

Hi there,

you can use this to give it a solid color:

@media (max-width: 768px) {
    .main-navigation .menu-toggle,
    .main-navigation .menu-toggle:hover {
        background-color: #fff;
    }
}

or a transparent Gradient:

@media (max-width: 768px) {
    .main-navigation .menu-toggle,
    .main-navigation .menu-toggle:hover {
        background-image: linear-gradient(0deg, rgba(34,193,195,0.57) 0%, rgba(253,187,45,0.71));
    }
}

You can generate your own background-image: linear-gradient property using this site:

https://cssgradient.io

Hello David,

Thanks! I'll have to play around with those to find the Goldilock's zone.

You're welcome