Transparent header on Dawn Theme Shopify 2.0

Store Design
1

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!

2

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

{% if template.name == 'index' %}
  
  {% endif %}

This way it’ll only apply on your homepage.

2 Likes
3

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

Thanks!

4

May I have a hand finding the please

5

How do you send a personal message?

6

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

7

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

8

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?

9

Yes

10

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-header-dawn-theme?comment=129500414178#comments

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

11

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

12

May I see your website?

13

www.aattmat.com

14

@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

15

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

16

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. :slightly_smiling_face: enjoy everyone.

1 Like
17

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.

18

@Lindsay3484 no problems :slightly_smiling_face: glad you liked it :slightly_smiling_face:

19

Seriously so amazing and worked perfectly!

20

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

1 Like