Hamburger menu and close icon color change - DAWN Theme

Hamburger menu and close icon color change - DAWN Theme

Sivadarshan
Shopify Partner
241 1 35

I'm using Dawn theme's latest version in that I need to customize the hamburger button in mobile view by changing the color of the Hamburger icon to white and closing the icon in black only on the home page.

 

Website: https://offnorth.com/

 

Thanks in advance. 

Replies 8 (8)

devcoders
Shopify Partner
1009 129 266

Hello @Sivadarshan 

 

Go to Online Store, then Theme, and select Edit Code.
Search for assets/base.css Add the provided code at the end of the file.

 

.header--mobile-center .header__icon--menu span .icon.icon-hamburger{
color: #ffff;
}
.header--mobile-center .header__icon--menu span .icon.icon-close {
color: #000;
}

 

devcoders_0-1737781728795.pngdevcoders_1-1737781741347.png

 

Shopify Developer: Helping eCommerce Stores

If you need assistance with your store, feel free to contact us at devcodersp@gmail.com
WhatsApp No: +91 8516919310 If my assistance was helpful, please consider liking and accepting the solution. Thank you!
Sivadarshan
Shopify Partner
241 1 35

@devcoders Sorry it's not changing

CodingFifty
Shopify Partner
616 97 116

Hi @Sivadarshan,


Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

svg.icon.icon-hamburger {
    color: white !important;
}

svg.icon.icon-close {
    color: black !important;
}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Sivadarshan
Shopify Partner
241 1 35

@CodingFifty Sorry it's not changing

CodingFifty
Shopify Partner
616 97 116

Please share store access so I can implement the code. @Sivadarshan 

Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Sivadarshan
Shopify Partner
241 1 35

@CodingFifty This is client store, so i have no access to provide the store access. Sorry 😞

CodingFifty
Shopify Partner
616 97 116

Please remove this code.

CodingFifty_0-1737790408043.png

Replace with:

svg.icon.icon-hamburger {
    color: white !important;
}

svg.icon.icon-close {
    color: black !important;
}
Coding Fifty || Shopify Partner
For any custom section queries, please visit: Fiverr Profile
Found my response useful? Like it and mark as Accepted Solution!
For additional discussions, reach out via: Email ID: codingfifty@gmail.com
Sivadarshan
Shopify Partner
241 1 35

@CodingFifty Where to find the code