- This topic has 5 replies, 2 voices, and was last updated 5 years, 7 months ago by
.
Hello, I’ve changed the colour of the hamburger icon to black using this code:
#header-navigation-mobile .c-hamburger span,
#header-navigation-mobile .c-hamburger span::before,
#header-navigation-mobile .c-hamburger span::after {
background-color: #000 !important;
}It has caused an issue where then the icon animates to “X”, the middle bar is still visible.
I tried the following code, which I found on this forum:
.c-hamburger–htx.is-active span {
background-color: none!important;
}It didn’t make any difference though.
The site is http://simplyreaders.co.uk/
Thanks
Solution for this topic
Hi @ania_yot,
I hope you are well today and thank you for your question.
Please use the below shared CSS code.
#header-navigation-mobile .c-hamburger:not(.is-active) span, #header-navigation-mobile .c-hamburger span::before, #header-navigation-mobile .c-hamburger span::after { background-color: #000 !important; }Best regards,
Shufflehound teamHi, thank for your reply. I added the CSS in the CCS code in theme settings but there’s no change.
Thanks
Anna
It is not working on your website because you have also added some CSS code on your website using Yellow Pencil Editor that overwrites my provided CSS code.
To make it work, please remove the CSS code that you have applied to it using the Yellow Pencil Editor.
You can reset the Yellow Pencil editor as described in the below pages.
https://yellowpencil.waspthemes.com/docs/managing-changes-on-entire-website/
https://yellowpencil.waspthemes.com/docs/managing-the-element-styles/That’s brilliant, thank you for your help it works 🙂
You are most welcome here 🙂
