Making Transparent Header in Dawn Theme Appear Only On Pages With A Image Banner At Top

[busyronin]

I was able to make the header transparent in dawn theme by adding this code to the base.css however it does it to all pages and so for those that do not have a banner image at the top it looks very bad because the header text is white and also it just doesn't give it any padding from the page contents.

How can I make it so that the Header stays transparent only on pages that detect a banner image a the top? When the banner image is not there, the header should be solid white and the text black (so since the header text when transparent is white, i believe we would need to make sure the inverse happens for pages that it is no longer transparent so that the text and logo are now black).

The transparent header is currently going overtop of important page content when there is not a Banner image.

You can see in the attachments, looks fantastic on home page, but then on cart page and login page the header is transparent so with no banner image to go over it now goes over important page content, and can't be read.

[GemPages]

Hi @busyronin 

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? 

Kind & Best regards,
GemPages Support Team

[busyronin]

www.SABATALO.com thank you!

[GemPages · Accepted solution]

Hi @busyronin 

You can try following these steps:

1. Go to Online Store -> Theme -> Edit code https://prnt.sc/fJOF9RnL7Rp5
2. Open your theme.liquid theme file

3. Paste the below code before </head> 

{% if request.path == '/' or request.path == '/pages/contact' %}
        <style>
          .header-wrapper {
              position: absolute;
              background-color: transparent;
          }
        </style>
{% else %}
         <style>
            .header-wrapper {
                position: relative !important;
                background: var(--gradient-background) !important;
            }
        </style>
{% endif %}

Kind & Best regards,
GemPages Support Team

[busyronin]

Hey! The code you gave worked and it makes all page headers now solid accept for the contact page, however if another page has a image banner at the top then it too should be a transparent header. Instead of it being all pages except for the contact page be solid, is there a way to write it so that if it lands on a page without a banner image at its top then it will be solid? otherwise it is transparent like the home page and the contact or another with banner? 

@GemPages 

[GemPages]

Hi @busyronin 

You can add another page that wants to have Transparent Header in my code. 

You can add 

or request.path == '/pages/about'

 to position like the image above.
Or change '/pages/about' to page url that you want make transparent header.

Best regards,
GemPages Support Team

[busyronin]

thank you! 

[ellie97]

Hi! I used this code and it worked perfectly for what I was looking for, but now my search icon, login icon, and cart icon are pushed to the left on the homepage. I'd like them in the far right like how they are on other pages. Any suggestions? 

[MM213]

This solution worked for me! Thanks!

[MRamzan]

Transparent header in shopify store: