How can I make my Dawn theme navigation drawer less transparent?

naydeam
Visitor
3 0 0

Hi!

 

I'm using the Dawn theme with a transparent header and I noticed that it also kind of turned the navigation menu drawer transparent too... it shows just when I scroll down on page. Other wise, the drawer opens and I can see that navigation is there but is kind of white/transparent. Is there any code that can help me with that? I want it to be visible even when the header is transparent.

Replies 4 (4)

Dan-From-Ryviu
Shopify Partner
7680 1494 1498

Hi @naydeam 

Could you share your store URL?

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

naydeam
Visitor
3 0 0

Yes. 

 

It's naydeam.shop

Dan-From-Ryviu
Shopify Partner
7680 1494 1498

Please add this code to theme.liquid file, after <head> and save file 

<style>
header.header.header--middle-center.header--mobile-center.page-width.drawer-menu.header--has-menu.header--has-social.header--has-account.transparent * {
color: #fff;
}
</style>

- Helpful? Like or Accept solution! or Buy me a coffee
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Easy and fast to create Photo Gallery, Lookbook, Shop The Look
- Enjoy 1 month of Shopify for $1. Sign up now

Anshul_arora
Navigator
364 103 71

Hello @naydeam ,

I understand you are looking to make changes in your menu drawer icon, so it will be visible with the transparent header.

Please add the below mentioned code in your theme.liquid file before </body> tag and save.

<style>

.header__icon span {
color: rgb(249 63 1);
}

a.header__icon.header__icon--account.link.focus-inset.small-hide {
color: rgb(249 63 1);
}

a#cart-icon-bubble {
color: rgb(249 63 1);
}

</style>

Output will look like this ->

Anshul_arora_0-1712043769665.png

 

I hope the solution helps you.

Thank you.

Please remember to like and accept the solution to help other store owners.

For Shopify Design & Development | Custom Coding -Visit Here