Solved

Transparent header on Dawn Theme Shopify 2.0

klackenb
Shopify Partner
26 0 5

Hi there,

I built a site on the old Brooklyn theme with a cool transparent header overlaying the image / video section below. 

Now on Dawn theme with Shopify 2.0 I cant seem to do it. 

Does anyone know how?

The very first section is a Pagefly section.

Site is: lifeisgreatenterprises.myshopify.com

password: lifeisgreat

 

any help much appreciated!

Accepted Solution (1)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Try this. In your theme.liquid file in your layouts folder add this style code and condition right after the closing </head> tag:

 

  {% if template.name == 'index' %}
  <style>
  .header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .header__menu-item, .header__active-menu-item, .header__icon .icon {
      color:#fff
  }

  .header__menu-item:hover{
      color:#fff;
  }

  </style>
  {% endif %}

 

 

This way it'll only apply on your homepage.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄

View solution in original post

Replies 26 (26)

Ninthony
Shopify Partner
2329 350 1023

This is an accepted solution.

Try this. In your theme.liquid file in your layouts folder add this style code and condition right after the closing </head> tag:

 

  {% if template.name == 'index' %}
  <style>
  .header-wrapper {
    position: fixed;
    top: 0;
    width: 100%;
  }

  .header__menu-item, .header__active-menu-item, .header__icon .icon {
      color:#fff
  }

  .header__menu-item:hover{
      color:#fff;
  }

  </style>
  {% endif %}

 

 

This way it'll only apply on your homepage.

If my solution helped you, please like it and accept it as the solution!
If you'd like to make any edits to your store, please send me a personal message and we can discuss what you'd like to accomplish 😄
klackenb
Shopify Partner
26 0 5

hey @Ninthony that worked perfectly! This will be super useful to others too cause I couldnt find a proper solution anywhere! 

Thanks!

Ordo
Visitor
3 0 0

May I have a hand finding the </head> please

 

Ordo
Visitor
3 0 0

How do you send a personal message?

 

jimson2
Visitor
1 0 0

Hi I'm a beginner, i tried doing this but i do not have a theme.liquid file in my templates folder? 

made4Uo
Shopify Partner
3804 713 1124

Hi, 

If you want your header to appear transparent in the home page but not the other pages. And also able to use the sticky header option. Check this video tutorial, code link under video description

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
mjdubarr
Pathfinder
109 0 29

Hello, I tried the first code in the thread and it didn't work. So I followed the steps from the video. I copy-pasted the selector code instead of the js code as mentioned in the video for the steps it said to paste the js code. My header is still white and my banner has not moved. I don't know what to do. Can you help me?

made4Uo
Shopify Partner
3804 713 1124

Yes

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
mjdubarr
Pathfinder
109 0 29

Thank you so much @made4Uo 

 

I noticed the changed I made following the link: https://made4uo.com/blogs/dawn-theme-tweaks-and-trick/how-can-i-make-hero-image-the-background-for-h...

didn't save, even though I did save. Not sure why that is. What would you suggest?

made4Uo
Shopify Partner
3804 713 1124

May I see your website?

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
Ordo
Visitor
3 0 0
made4Uo
Shopify Partner
3804 713 1124

@Ordo I have been updating the code. Just follow the video on how to use the devTools mainly, and follow the steps in the website

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!
mjdubarr
Pathfinder
109 0 29

@made4Uo also, from 1:40 - 3:18, do I type in those codes? I didn't see them on the link.

Lindsay3484
New Member
5 0 0

Hello,

 

   I used the code given and it moved the image banner to the top of the header nicely. The side effect is that now my drop down menu is fixed, meaning users can not scroll down to see lower portions of the menu. Can this be altered, to allow menu to scroll when opened? I have a large mega menu through the Smart Menu App.

 

Any help is appreciated.

 

-Lindsay

ericsoho
Explorer
50 0 13

I used your code. My only question is how can I do the same thing for the footer?

seasap1
Visitor
1 0 0

Hi there, I can't get this to work on my page. Is there something I'm missing? 

 

websensepro
Shopify Partner
992 135 143

Check out this tutorial https://www.youtube.com/watch?v=8q6T1DSGXto

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here
Yomi14
New Member
8 0 0

Hi @Ninthony do you have a code to do this but in Sense theme? 

SAASMics
Tourist
4 0 2

Thanks for this code - it worked beautifully for my desktop version. But for some reason my logo header, search icon, and cart icon disappear on mobile, and my collection list gets pushed all the way to the top. Do you have any idea why this is happening, and how I can fix it?

 

my store:

www.sovietamericanaudiosystems.com

password: lomoaiwatoshiba

 

thank you!

JohnFromJotting
Shopify Partner
665 94 132

Hi Everyone,

 

How To Make Dawn Theme Header Transparent - Bluish.io

 

I've created a blog on how to turn the header transparent, as well as add color to the links and icons via the customizer while the header is transparent. I noticed some replies don't really code it well, so I took the initiative to complete it well and good. 🙂 enjoy everyone.

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

Lindsay3484
New Member
5 0 0

Thank you, so much! I had figured out another solution, but this one is so much better. Being able to control it in the customizer panel is fantastic. Your instructions are easy to follow. Thank you so much again. 

I would highly suggest this solution. 

JohnFromJotting
Shopify Partner
665 94 132

@Lindsay3484 no problems 🙂 glad you liked it🙂

Check out my blog for some awesome Shopify, SEO and Social Media Marketing content.


To hire me, visit my Upwork profile

a_ford
Visitor
1 0 0

Seriously so amazing and worked perfectly!

ruthmejiasmm
Shopify Partner
1 0 0

This is the best solution I've tried so far! It works perfectly well. Thank you @JohnFromJotting 

 

made4Uo
Shopify Partner
3804 713 1124

Hi, 

 

Updated the code. No more headaches here. I made a short and simple code to the job. Works with sticky header too. See video for more info

 

Volunteering to assist you!  Likes and Accept as Solution  is highly appreciated.✌
Coffee fuels my dedication. If helpful, a small Coffee Tip would be greatly appreciated.
Need EXPERIENCED Shopify developer without breaking the bank?
Hire us at Made4Uo.com for quick replies.
Stay in control and maintain your security by avoiding unnecessary store access!

chelux
Excursionist
38 0 8

This didn’t work for me — it just pushed the header up