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

naydeam · ‎04-01-2024

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.

Dan-From-Ryviu · ‎04-01-2024

Hi @naydeam

Could you share your store URL?

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

naydeam · ‎04-01-2024

Yes.

It's naydeam.shop

Dan-From-Ryviu · ‎04-02-2024

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>

- Found this helpful? Hit "Like" and "Accept as Solution"! - Feeling generous. ☕ Buy me coffee!
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image - Gain customers with photo gallery, video & shoppable image
Built for Shopify

Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- En...Sign up now.

Anshul_arora · ‎04-02-2024

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 ->

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

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

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

Community Blog Articles