How can I make the header transparent in the new Dawn theme?

[le_X_Atelier_]

 here you can see the new dawn theme with the updated version but there is no transparent header. 

I want the header transparent like this 

but i can't find the code so maybe someone has me a code for this. I chossed sticky header so when i scroll down the header goes down and white

www.le-x-atelier.com

pw: djerba

[PageFly-Victor]

Hi @le_X_Atelier_ 

This is Victor from PageFly - Landing Page Builder App

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

}

Hope that my solution works for you.

Best regards,

Victor | PageFly

[le_X_Atelier_]

 that works but when i want to change the size of the safari window the header is still on the same position so its not in the center

[PageFly-Victor · Accepted solution]

@le_X_Atelier_ 

You can try again this code:

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

[le_X_Atelier_]

that works but the last point is so when i scroll down the page the header comes with me but is still transparent but i want it with a white background then so like this: 

 

[queenjuni]

I have a question I used this code on dawn theme and it worked but there is an issue when i scroll down ( I have a sticky header ) and when I do that the shopping bag, search ect,you cant see it because its white but i need it to be white for the transparent part and i need it to be black when scrolling down 

[GemPages]

Hello @le_X_Atelier_ ,

You can follow these steps: 
1. Go to Online Store->Theme->Edit code

2. Open your theme.liquid file, paste the below code before </body>

    <style>
        .section-header.shopify-section-group-header-group {
          position: absolute;
          width: 100%;
          top: 30px;
      }
          
      .section-header.shopify-section-group-header-group sticky-header.header-wrapper {
            background: none;
      }
    </style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[ForstGlobal]

Hi Gempages.

This works great for me, but is it possible to have it work only on the home page?

Thanks

[OfficialPrey]

Hey, do you have dicsord by any chance? i am trying to have my header when people land on my page be transparent along with icons be white, once hovered over the header with the mouse cursor, the header turns white and icons turn black, then if you hover off the header with your mouse, it turns transparent again along with the icons like menu and search icon turn white again. Willing to pay, i left an example right beside this. VIDEO HERE!  

My discord Official Prey#0001

[QuietSuperB_]

Hi, thank you for this code! It works really well. I only have one problem thoæugh. The white header background (after scrolling down) s not in full width? I try changing the width but no luck. Any tips would be helpful. 

[NH89]

Thanks for this code, it works great. I am running into some issues with the new Dawn V.15.1...

When I hover over the Header the whole section changes to a solid white.

Q: Can the header permanently be transparent?

Also, when I navigate to a collections or Product page, I am noticing that my product info is now at the top of the page behind the Header.

Q: Can the product or collection description be aligned so the header stays above the Product description?

[MRamzan]

You can add transparent header in your Dawn theme:

[MRamzan]

You can try this solution for transparent header: