How to make header transparent in Dawn Theme

[Imporify]

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

[Liquid_xPert_SJ]

@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

[Imporify]

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]

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

[Imporify]

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

[Vinsinfo]

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