hamburger background

[LAC1993]

hello.

my website l’ateliercommerce.com

code: Lac1234 (no need email)

I am using the modular theme.

on the mobile I have an hamburger menu an the home page - the home page is full photo the the hamburger is on (only on the home page).

somehow the hamburger menu is no transparent it has a white square around it .

there is possibility to make this transparency and in the color of the cart.

[BSS-TekLabs]

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

• Then find the base.css or theme.css file.
• Then add the following code at the end of the file and press ‘Save’ to save it.

.menuToggle .diamond-bar {
    background-color: transparent !important;
}

• Here is the result you will achieve:

• Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.

[Rahul_dhiman]

Hello @LAC1993
Go to online store ----> themes ----> actions ----> edit code ---->theme.css
add this code at the end of the file.

.menuToggle .diamond-bar {
background-color: transparent !important;
}

result

If this was helpful, hit the like button and accept the solution.
Thanks

[dws_pvt_ltd]

Hello @LAC1993 , Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on “Themes”
3. Select “Edit code”
4. Open your CSS file. If you have a custom CSS file, open that instead.
5. If you can’t find your custom CSS file, open “base.css”
6. Add the following code at the end of the file.

.menuToggle .diamond-bar {
    background-color: #ffffff00 !important
}
.icon-menu .icon-bar, .icon-menu .icon-bar:before, .icon-menu .icon-bar:after {
    background-color: #ffffff !important;
}

See the screenshot below,

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.

[niraj_patel]

Hello @LAC1993

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

@media screen and (max-width: 767px){ .icon-menu .icon-bar:after, .icon-bar:before{ background: #fff !important; } .menuToggle .diamond-bar { background-color: transparent !important; } }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.