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?

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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>

- Helpful? Like and Accept solution! Support me! Buy me coffee
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Ryviu: Aliexpress Reviews - AliExpress Reviews Importer, one-click import aliexpress reviews, export reviews to CSV file.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. 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