How To Make A Transparent Header in Shopify [Dawn V14]

[@hopelovefaithinGod]

Hi this didn’t work for V15 of the Dawn theme, when I followed your steps, Shopify had coded text saying I’m missing cart and login on the homepage where the cart and account login normally is placed on the top right corner Please can you make an updated version of this? Thank you

[@WebSensePro]

Coming next week with more cool features

[@tingannlin6586]

@@WebSensePro Hi, this video perfectly meets my needs, I really appreciate it if you could make a version that's compatible with v15. Thank you so much.

[@sagasports]

hi there, great tutorial, there is an error that comes up when inserting your code for a brand new Dawn 15.1. A: "506 could not find snippet asset/icon snippets" appears. Any ideas to fix them? Keep up the good work

[@niicolas_espino]

Good video, but Where are you going to record a video with mobile version?

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@fabioferrotti3716]

U are amazing. Just one issue for me, when insert "transparent color" code also the footer text change color and disappear over the bg color. How I can fix it?

[@WebSensePro]

You can use css

[@fabioferrotti3716]

@@WebSensePro true, thanks. If someone need I have used this code in footer CSS section: .list-menu__item { color: #715b1a !important; }

[@Liernur]

Hello, thank you so much for all the help you give us. I noticed in the video and in my website too that when you scroll, the coin and language selector arent visible if we have a withe background, there is some way to fix that? again, thank you so much

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@Liernur]

@@WebSensePro hi, isnt about my store, im just pointing an error in the code for the transparent header to fix adding a little update in the code website or in the next dawn version. Thank you very much

[@bramstarink7036]

another good video, only can you do that it also works on mobile. most people come to your website via mobile. exactly like the prestige theme. or do you already have such a video? i can't find it

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@TseStanley]

code is working on menu but I woiuld like to apply it to Mega menu.....can you help?

[@WebSensePro]

Sure, contact via websensepro.com/contact-us for paid support

[@juicyrezz784]

is there a way to change the logo as well when hovering over the header?

[@WebSensePro]

Yes, you can do that from customize settings

[@juicyrezz784]

@@WebSensePro Could you possibly elaborate? I see no option to change the logo when hovering on the header, I only have the options for enable transparent header, transparent text color, hover background color, and hover text color, thanks

[@robertcox4079]

it seems i cannot type in hex code to change colors on color scheme or hover background color after using your code. i can move the color cursor around, but i cannot type in specific hex code. any thoughts on how to fix this?

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@domingosamaniego4076]

Great video!! would love to know how to change the logo when hover too, and also how to make transparent on mobile too ;D

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@pierrotnko6213]

I really like your videos and it's helped me a lot,. But I noticed that, everytime you make changes, you don't view on mobile version t see how it's looks like. I tried this, but it doesnt work on mobile.

[@monetgrant1404]

I have the same problem, if and when someone knows please let us know!

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@Michael-m6i]

looks great!

[@WebSensePro]

Thank you!

[@abdulwasay4014]

Brother please make a video on how to design store in a way that on mobile phone it shows the images vertically like portrait and on desktop landscape im really struggling client is asking me for that and i have no clue how to do that.

[@WebSensePro]

kzbin.info/www/bejne/eYCzppqCiLyVbsk

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@CortneySiegle]

Will this work for DAWN V15.0.0?

[@WebSensePro]

Yes

[@hopelovefaithinGod]

Hi, I tried this for DAWN V15 and sadly it does not work

[@instant_sours9807]

Is this the updated one where it is useable on mobile too?

[@WebSensePro]

Its not going to affect mobile version at all as it does not look good on mobile

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@hernanr.240]

wonderful, congratulations🙌🙌. Mobile version, maybe?

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@chithangnguyen9901]

the feature is displayed on every page - when in mobi interface, can you update it again?

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@ValentinaTroche]

how can I desactivate the hover background color option?

[@ValentinaTroche]

Might not be the most aesthetic solution but I just commented the following line: {% comment %} .header-wrapper:hover{ background-color: {{ section.settings.color-hover-background }} !important; } .header-wrapper:hover .header__icon.link, .header-wrapper:hover .header__active-menu-item, .header-wrapper:hover .list-menu__item, .header-wrapper:hover details[open]>.header__submenu, .header-wrapper:hover .disclosure__button, .header-wrapper:hover .header__heading-link .h2{ color: {{ section.settings.color-hover-text }} !important; }{% endcomment %}

[@WebSensePro]

{ "type": "color", "id": "color-hover-background", "label": "Hover Background Color" }, { "type": "color", "id": "color-hover-text", "label": "Hover Text Color" }, You can locate this code and remove it.

[@GGaming-uy8em]

Brother make video on mobile version transparent header Plz i request you

[@WebSensePro]

It does not look good on mobile

[@GGaming-uy8em]

@@WebSensePro 🥲🥲🥲

[@GGaming-uy8em]

But make for mobile bro plz ❤️

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@sanket2272]

Hello, This code does not work for me, can you please help

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@MuhammadAhmad-mc1vc]

Thank you so much sir for making such a good informative useful content videos ... i have a request that I really the code of stylish color swatches but I can't do that because the code that you have provide is not working on Dawn 14.0.0.... sir please help me ... awaiting for your response :) #WebSensePro#legend

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@devjyotiroy6639]

only home page is not working on mobile :(

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@Hashim_8485]

not working on v15

[@WebSensePro]

Updated version coming next week

[@naomitgotin]

the transparent header does not appear on mobile, is this normal? 😢

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@oster1820]

Found a solution that works for me when it comes to mobile transparent header. Follow the videos instructions and than after change this small piece of code. Search for this "@media only screen and (min-width: 990px)" and change it to this "@media only screen and (min-width: 300px)". hope this helps! Note you can also just change the 990 to 300!

[@AllanPalomanesChannel]

How To Make A Transparent Header in Shopify Dawn V15?

[@WebSensePro]

Updates video coming this week

[@rachelgong7025]

Hi! Thank you so much for making these videos - they're so helpful! I managed to make my transparent header for the Dawn 14.0 theme via the video here - kzbin.info/www/bejne/rXzRn4mfrM91qNU. However, it's not working for pages that are not my homepage, even though the option "only on Homepage" was toggled "on". Will this video address this issue? Thank you!

[@WebSensePro]

Please contact via websensepro.com/contact-us for paid support

[@alphabravo-c1j]

Liquid error (snippets/header-mega-menu line 36): Could not find asset snippets/megamenu-image-custom.liquid facing error

[@WebSensePro]

Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support