Transparent header on Dawn Theme Shopify 2.0

Solved
klackenb
Excursionist
23 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)

Accepted Solutions
Ninthony
Shopify Partner
2247 339 901

This is an accepted solution.

Try this. In your theme.liquid file in your templates 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 :D

View solution in original post

Replies 14 (14)
Ninthony
Shopify Partner
2247 339 901

This is an accepted solution.

Try this. In your theme.liquid file in your templates 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 :D

View solution in original post

klackenb
Excursionist
23 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
New Member
3 0 0

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

 

Ordo
New Member
3 0 0

How do you send a personal message?

 

jimson2
New Member
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
Navigator
210 11 77

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

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
mjdubarr
Tourist
30 0 3

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
Navigator
210 11 77

Yes

I do not work with Shopify. I am not looking to be hired or being paid. Just wanted to help.
mjdubarr
Tourist
30 0 3

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?