What's your biggest current challenge? Have your say in Community Polls along the right column.

Dawn Theme Transparent Header

Dawn Theme Transparent Header

meepmediauk
Shopify Partner
30 0 1

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

Screenshot 2024-11-17 at 16.01.43.png

Other Pages:

just a white block 

Screenshot 2024-11-17 at 16.02.14.png

 

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 🙂 

Replies 4 (4)

TechSprout
Shopify Partner
19 2 2

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.

TechSprout - Commerce Solutions
If this post helped, please "Like" and "Mark as Solution" to help others with the same issue. Send me a DM if you have any other questions.
meepmediauk
Shopify Partner
30 0 1

Yes in global theme liquid and base css for design 

DaisyVo
Shopify Partner
988 125 141

HI @meepmediauk 

 

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

 

Best,

 

Daisy

Please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Avada SEO & Image Optimizer - The #1 SEO solution

chethan025
Shopify Partner
13 2 2

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

 chethan025_1-1731766050094.png

 

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. chethan025_2-1731767006820.png

     

  4. 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,

 

Chethan S
Shopify Developer
Open to small projects at no cost & affordable rates for full builds.
Contact - Gmail