How to make header transparent in Dawn Theme

Imporify
Tourist
12 0 1

Hi there, 

I'm trying to make my header transparent on all pages, with the text (on the header) the colour white. I've tried before but the font colour always turns black. Also, after making the header transparent with white text, can you also provide me with the coding to create the sticky menu not transparent? thank you 

 

My website: https://imporify.com/ 

Password: UnitedArsenal

Replies 5 (5)

Liqiud_xPert_SJ
Shopify Partner
730 93 115

@Imporify 

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

header.header.header--top-center.header--mobile-center.page-width.header--has-menu {
    background: transparent !important;
    position: absolute;
    width: 100%;
}

Thanks

- Please don't forget to Like and Mark Solution to the post that helped you. Thanks!
- Your Shopify Solution Specialist For further discussion contact: Email ID- Liqud_3xPert_SJ OR Whatsapp
- Buy a Coffee for me to get more frequently help 🙂
- Hire Me to unlock the full potential of your e-commerce store Now 🙂
Imporify
Tourist
12 0 1

Hi there thanks for your prompt response. Unfortunately this doesn't work when I add the code in to the bottom of base.css. What else can I do. Thanks

PageFly-Oliver
Astronaut
840 176 156

Hi @Imporify ,

 

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file -> Save

 

<style>
header.header--has-menu {
    background: transparent !important;
    color:white !important
}
</style>

 

 

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Imporify
Tourist
12 0 1

Hi there, sorry but this didn't work. Any other way I could go about this?

Vinsinfo
Shopify Partner
168 58 53

@Imporify Please find the below steps to make the header transparent with white text and not transparent on sticky menu. Let me know whether it is helpful for you.

1. Go to "Online Store" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Locate "base.css" file and paste below code at the bottom of the file.

 

sticky-header.header-wrapper header.header {
    background: transparent;
    position: absolute;
    width: 100%;
}
.header .disclosure .disclosure__button span, .header .disclosure .disclosure__button svg, .header__inline-menu .list-menu li span, .header__inline-menu .list-menu li svg, .header__icon, .header .localization-selector.link {
    color: #FFFFFF;
}

.scrolled-past-header .header .disclosure .disclosure__button span, .scrolled-past-header .header .disclosure .disclosure__button svg, .scrolled-past-header .header__inline-menu .list-menu li span, .scrolled-past-header .header__inline-menu .list-menu li svg, .scrolled-past-header .header__icon, .scrolled-past-header .header .localization-selector.link {
    color: rgb(var(--color-foreground)) !important;
}

.scrolled-past-header .header {
    background: var(--gradient-background) !important;
    position: absolute;
    max-width: 100%;
}

 

 

If it doesn't helps you, please share your current store password to share the correct solution based on the current changes in your store.
 
Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.