For latest 13.0.1 themes, please check out this video kzfaq.info/get/bejne/rbGeobma3NCmoqc.html

Nothing has worked until this, awesome work. Worked for Dawn version 12.0.0.

TYSM. The perfect Video I was looking for!

Been trying to do this for so long, thank you so much!

Bro this is amazing!!! Super grate tutorial, i love it.

Thanks, everything works great!

It worked! Thank you so much! Love from Germany

You're a G! Worked perfect!

Thank you so much! the tutorial helped us so much. God bless you

Just did this on my Dawn 11 and it worked!! Thank youuuuuuuuuuu

Thank you very much!!! It works!

JazakAllah Bhai you've guided extremely well.

Hey men this video was so helpful and amazing! Thank you so much!!

Thank you. It work perfectly!

Love it. Thank you so much.

You are Genius BRO! Thank you!

Thanks, worked well!!

thank you helped alot

Thank you so much!!

Thank you so much :)

We were looking for this for so long. Thank you guys. Can't seem to have my icon nor my translation apps to become white, though

Thank you very much. From Brazil.

Cheers brother!!

Great video! Worked on Dawn 12. Quick question, can you also add the code to change color or include the change color of the Country/region & language selectors for the homepage? Thank you! (making sure it doesn't change on mobile though...)

prefectly worked for dawn 11

love your videos! Please upload a video on how to do hover drop down menu on Dawn 10.0.0 pls!! Appreciate you bro

Thank you for your video it was very usefull! Please can you make a new video for showing discount percentage when something is on sale for dawn 10.0?

It's worked, Thank you ! How do I set the same color for the logo?

Hey This was such an awesome easy to follow video thank you so much!! Do you have any code, that will allow the header to become solid background colour on scroll, as it is hard to see the icons & logo once scroll has happened. Thank you

Hello, thank you so much for the tutorial! I tried it it works well. 😊 I changed my cart icon following your previous tutorial and I can’t change its color when the header is transparent, and it’s the same for the logo do you have a solution?

Super good tutorial, thank you for this video! I would like to try it with my Sense theme, do you think it could work or is it only for Dawn theme?

Great video, you should make another video of how to make the sticky header transparent about the password section.

so help thanks

Great job! I would like the transparent header on all pages. Please release this tutorial. I would be so grateful! Many thanks boss

This worked perfectly, thank you so much for the help! By any chance can you please also update the alternative Logo for a transparent Header? I would appreciate it a lot!

Love You Boss

Hi, This worked perfectly, thank you so much ...Can you also help me to make header sticky when scroll down

Hey there thanks for this helpful video! the hamburger menu and mobile menudo not display now? Any reason why?

Hello dear, WHAT A GREAT JOB!!! Wonderful. I would like to turn on the transparent header for all my pages. how is it possible dear? thank you very much

Thanks you soo much. Sir, Can you make a video video how to make parent menu clickable in drop down.

Hello, thanks for your great tutorial videos, they have helped me with my website. If possible, can you do a tutorial for how to add product labels / badges to Dawn 10.0.0 collection page product cards using metafields?

Hey i like u videos How do I make the header not invisible when selecting categories on the handy version?

Hi there, is there a way to change the opacity so it is not completely transparent but there is a slight shadow behind it? Thank you!

thank you, but it says on the video that you have header on scroll up but it looks like sticky header. My question is can you make the normal header appear only when you scroll up?

Works perfectly! However, after doing this, the 'Sticky head - on scroll up' doesn't seem to be working. Any fix?

hi, any way of having a solid header and then only transparent when scrolling down/up? thank you

Hi Bilal, As always thanks so much for constantly updating your community with new helpful tips, coding techniques & other cool information. I do have one question that I know will require more css, so I was hoping you could provide the solution. When you are at the very top of the page on mobile & you click on your mobile drawer icon, the header remains transparent, instead of transitioning to a white background. The past sticky + transparent header tutorial you did, did not do this, it transitioned to white when you were at the very top of the front page, so I was curious on how to fix this issue? Thanks in advance!

Hello, Thanks for this solution. For me it works, but the header is only transparent on the home page. On other pages it is not transparent. Do you have a solution?

Hey, I implemented this code into my DAWN 13.0.1 and it works fine I even added it to my product pages but I noticed that it is affecting the mobile menu drawer. The pages that are affected by the transparent header if you reduce the browser size to show burger menu, the SIGN IN button is outside the screen view. But the pages that are not affected by the transparency show the menu correctly. Would you have a fix for that please? I guess the code needs updating ? Thanks

Hi, how can I make the Slide Bar under the Photo Slideshow also transparent like the Header?

I hope you can create a video for Dawn version 12 with a sticky header when scrolling up.

hi, can you help to get the footer transparent in dawn theme

Are you still going to make that video on how to change to logo in a sticky header? :)

Do it have a change to add a transparent header on the product Site ?

I have used your tutorial and it works perfectly on desktop however on mobile the text on Dawn is overlapping the logo and header categories. Is there a way to stop that happening? TIA :)

Amazing work, thanks so much :) Do you have an idea on how we could extend the transparent header to another page? Say the Blog page. Thanks!

It worked but I have a problem with the header menu. I can't scroll down. Do you have a solution? I think many have it. Down 12.0.0.

Tried this and everything seemed to work perfectly. However, now I'm tying to change the color of one menu item to red and it doesn't work. Any help would be appreciated.

hai sir how ca we add transparent header in shopify 11.0.0 is it same as 10.0 as u showed in ur video or it is different

Legit!! Now can you help me change the search, login, and cart icons to display only names instead of the icon image?

Hello brother, I have changed my logo image, with the text directly so that the color can also be changed, but the text does not change color, only the cart and the hamburger change

Hi Bilal, when I search the first code, I am unable to find that code. Is there any reason for this? Is it due to the 11 update?

F command doesn't open the search bar, any recommendations how to open it? Thanks

how do i change my logo to the other colour because you cant see the logo when the header changes to white

how do you make the store name the same colour as the text?

On cell phones, the logo and menu do not appear, they only appear after scrolling down the page

how can I add a transition effect so that in eases from transparent to a white header?

Tried it on Dawn 13.0 but it didn't quite work, especially when scrolling down the menu didn't go back to its original features (stayed transparent). Any recommendations for it to work on 13.0?

How do I do this in the Ride Theme?

How can I enable this on every page?

Hi Bilal, hi folks, fixed for Dawn11, On scroll up sticky header: In DAWN Version 11.0, I had the problem that the header on the main page was not hidden anymore when the Sticky Header was set to "On scroll up." I adapted the code provided by Bilal, which needs to be inserted into the header.liquid file before the schema. The rest remains the same as written by Bilal. Hope this helps! Here ist the code: {% if template == 'index' and section.settings.transparent_header %} {% style %} .template-index .site-header-transparent .header__icon, .template-index .site-header-transparent .header__menu-item span, .template-index .site-header-transparent .header__menu-item svg, .template-index .site-header-transparent .header__active-menu-item { color: {{ section.settings.content_color }}; } .site-header-transparent { background: transparent; position: fixed; top: 0; left: 0; right: 0; z-index: 999; transition: opacity 0.3s ease; } {% endstyle %} document.addEventListener("DOMContentLoaded", function(event) { // Scrollverhalten hinzufügen var prevScrollPos = window.pageYOffset; var header = document.getElementById('site-header'); window.addEventListener('scroll', function() { var currentScrollPos = window.pageYOffset; var headerHeight = header.offsetHeight; if (currentScrollPos > headerHeight) { header.style.opacity = '0'; } else { header.style.opacity = '1'; } prevScrollPos = currentScrollPos; }); document.getElementById("header-menu").addEventListener('click', function() { var sideMenu = document.getElementById('Details-menu-drawer-container'); var header = document.getElementById('site-header'); var headerHeight = header.offsetHeight; if (window.pageYOffset < headerHeight) { if (!sideMenu.classList.contains('menu-opening')) { header.style.opacity = '1'; } else { header.style.opacity = '0'; } } }); document.getElementById("header-search").addEventListener('click', function() { var search = document.getElementById('template-index'); var header = document.getElementById('site-header'); var headerHeight = header.offsetHeight; if (window.pageYOffset < headerHeight) { if (search.classList.contains('overflow-hidden')) { header.style.opacity = '1'; } else { header.style.opacity = '0'; } } }); }); {% endif %} Best, Stefan

when i scroll down the transparent header wont turn to normal

I cannot find the place to enable transparent header

fucks everything up on mobile any solutions?

please make the video to show the whole theme with transparent header. Or send me the code i dont need the video lol

thanks for your good work, i have one more question, i want .site-header-transparent { background: rgba(10, 10, 10, 0.5); but it is not spread over the whole screen do you know where the problem is ? width: is 100%;

Can you tell me exactly which phrase do i have to eliminate to make this header transparent on every page not just main page? I'd appreciate it.