How do I make a transparent header for password page Dawn theme?

[lonelyboy]

I was able to make the header transparent for the home page of my website. I want to be able to do the same with the password page as well (mobile and desktop). I want the image to be behind the transparent header. I can't find this solve anywhere. Any help?

[GemPages]

Hello @lonelyboy

Password page have not header

Can you give me your page URL( with pass if your store password is enabled) so I can check it and maybe give you a solution? 

Or you can try add custom code make the header transparent for hompage to below </head> on file password.liquid

<style>
    /*your CSS code*/
  </style>

Kind & Best regards,
GemPages Support Team

[lonelyboy]

Website: lonelyboycollctns.com

Password: tortai

Hope you will see what I'm talking about.

[GemPages · Accepted solution]

Hello @lonelyboy

It's GemPages support team and glad to support you today.

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

2. Open your password.liquid file, paste the below code before </head>

<style>
#shopify-section-main-password-header .password-header{
    position: absolute;
    background: transparent;
    z-index: 99;
    width: 100%;
    left: 50%;
    transform: translateX(-50%);
}
</style>

I hope the above is useful to you.

Kind & Best regards, 
GemPages Support Team

[lonelyboy]

Thank you so much!! This worked perfectly.

[lonelyboy]

Can you help. I found an issue with sizing when you go into the enter password section. Any way to make this transparent as well? Or size the black box correctly with the text? Issues with mobile and desktop.

[MRamzan]

You can add this transparent header in any page: