Dawn Theme Transparent Header

Hello, I hope someone can help me.

I found some code online to add a transparent header to my Dawn Theme.

It works on the homepage, but doesn’t work on other pages.

This is what happens:
Homepage:
works as needed

Other Pages:

just a white block

Please note; because I want the text to be white, it needs to work globally.

Also, I don’t want to header to be sticky if transparent, with this code it stays sticky regardless if the setting is switched on or not.

Open to new code that works responsively! Thank you :slightly_smiling_face:

Hello @meepmediauk , where did you place the code you found? If it only appears on the homepage, then you probably just need to place it in one of the global .css files in your theme.

HI @meepmediauk

Please provide your store URL and password so I can help you

Best,

Daisy

Hello @meepmediauk ,

To remove Sticky Header follow this steps,

  1. Go to Theme Customization, Select Header.
  2. Select Sticky Header to None. (refer the below picture.)

To make Header background Transparent Follow this steps.

  1. In Theme Customization page, Click on the Three Dots in upper left side, it should be after your Theme Name.

  2. Select Edit Code from the option, search for header and open header.liquid.

  3. Paste this Code at the top of the page.

{% style %}
  .header{
    background: transparent !important;
  }
{% endstyle %}​
  • Save and Preview your Website.

If this not worked please share your Website link and password, I’ll help you solve this problem, If It worked Please mark this as a Solution and like this reply.

Thank you,

Yes in global theme liquid and base css for design