change color of hamburger

[LAC1993]

Hello,

My account:

www.Lateliercommerce.com

Password: Lac1234

On the main page, I have a hamburger logo that is black (in mobile view in other view there is words that it is white). I want to change the color of the hamburger logo to white.

However, when I do this, it becomes invisible because the website theme on the shop pages (all pages except the home page) is white.

For example, the cart icon changes color—it is white on the home page but turns black on all other pages.

I want the hamburger logo to be white on the home page and black on all other pages because the background on the other pages is white.

[BSSCommerce-HDL]

Hi @LAC1993, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag:

{% if template.name == 'index' %}
    <style>
    .icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
        background-color: #ffff !important;
     }
    </style>
{% endif %}

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Made4uo-Ribe]

Hi @LAC1993 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes"

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "theme. Liquid" file. Find the </body> tag and paste the code below before the tag. 

{% if template.name == 'index' %}
<style>
.icon-menu .icon-bar,
.icon-menu .icon-bar:before,
.icon-menu .icon-bar:after {
  background-color: #fff;
}
</style>
{% endif %}

And Save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[topnewyork · Accepted solution]

Hi @LAC1993 , kindly try the below code

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

{% if template.name == 'index' %}
    <style>
    .icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
        background-color: white !important;
     }
    </style>
{% endif %}

If my reply is helpful, kindly click like and mark it as an accepted solution.

Thanks!

[LAC1993]

thank you. this worked prefect. 

[BSS-TekLabs]

- Here is the solution for you @LAC1993 
- Please follow these steps:

- Then find the theme.liquid file.
- Then add the following code at the before tag </head> and press 'Save' to save it.

 

<style>
.icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
    background-color: currentColor !important;
}
</style>

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.