My hamburger menu on tablet and mobile is two colors. I'd like it to change from dark to light depending on the section background and for it to be one color (no opacity changes for any lines). I'd like the light color to be #ebe7e4 and dark color to be #2a3b49.
This doesnt fix the problem of the hamburger menu not changing color to dark on light backgrounds. Could you please advise? I need it to turn dark blue on a light tan background and it doesnt currently.
That feature is already turned on and doesnt fix the hamburger menu colors. It still doesnt change to the dark color scheme on light headers (on mobile and tablet versions). See attachment below to see how it works against dark backgrounds, but doesnt on light backgrounds.
I have tested the hamburger from my end and the bars are displaying 3 of them as per the screenshot. I recommend you clear your browser history and test again.
body #header-outer[data-has-menu][data-format][data-padding][data-using-logo] > #top .slide-out-widget-area-toggle a .lines-button i.lines:after, body.material #header-outer .slide-out-widget-area-toggle a .close-line, body.material #header-outer[data-using-logo].transparent .slide-out-widget-area-toggle a .close-line {
background: black !important;
}
Hi,
My hamburger menu on tablet and mobile is two colors. I'd like it to change from dark to light depending on the section background and for it to be one color (no opacity changes for any lines). I'd like the light color to be #ebe7e4 and dark color to be #2a3b49.
Hi Jasmine,
Try the following custom css in Salient > General settings > CSS/Script related:
@media only screen and (max-width: 1000px) { .slide-out-widget-area-toggle.mobile-icon .lines-button:after, .slide-out-widget-area-toggle.mobile-icon .lines-button.x2 .lines:before { background: white !important; } }Kind regards.
Hi Andrew,
This doesnt fix the problem of the hamburger menu not changing color to dark on light backgrounds. Could you please advise? I need it to turn dark blue on a light tan background and it doesnt currently.
Hi Jasmine,
How about you try turning this feature on:
Hope this helps.
Thanks.
Hi Andrew,
That feature is already turned on and doesnt fix the hamburger menu colors. It still doesnt change to the dark color scheme on light headers (on mobile and tablet versions). See attachment below to see how it works against dark backgrounds, but doesnt on light backgrounds.
Hi Jasmine,
Please send in your admin login credentials so that we can look into the issue further.
Thanks.
Hi Jasmine,
Please try enabling the option below:
Thanks.
That helped a little, but now the top bar of the hamburger is missing.
Hi Jasmine,
I have tested the hamburger from my end and the bars are displaying 3 of them as per the screenshot. I recommend you clear your browser history and test again.
https://monosnap.com/file/GtA1yfrM4qanpIBOtIp7NY9xforU15
Hi,
This doesnt fix the mobile hamburger menu bars (before hovering) on a light background. Its still missing the top bar. See attached screenshot.
Hi Jasmine,
Try the following custom css
body #header-outer[data-has-menu][data-format][data-padding][data-using-logo] > #top .slide-out-widget-area-toggle a .lines-button i.lines:after, body.material #header-outer .slide-out-widget-area-toggle a .close-line, body.material #header-outer[data-using-logo].transparent .slide-out-widget-area-toggle a .close-line { background: black !important; }Kind regards.