Mobile hamburger menu color change - Dawn theme

[Sivadarshan]

I want to customize the header hamburger menu color to white only on the home page, with the close icon in black. On all other pages, the hamburger menu should be black. These all customization should only applicable to mobile view only.

website: https://offnorth.com/

[DaisyVo]

Hi @Sivadarshan

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
{% if template.name == "index" %}
@media screen and (max-width: 768px){
details#Details-menu-drawer-container > summary.header__icon > span > svg.icon.icon-hamburger > path {
    color: white !important;
}
}
{% endif %}
{% endstyle %}

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[devcoders]

Hello @Sivadarshan

Go to Online Store, then Theme, and select Edit Code.
Search for Layout/theme.liquid Add the provided code at the end of the file.

{% if template == 'index' %}

{% endif %}