How To Make A Transparent Header in Shopify [Dawn 13.0.1]
Ғылым және технология
How To Make A Transparent Header in Shopify
Welcome back to the channel! In this tutorial, we're diving into implementing the highly-requested transparent header feature with the ability to change the logo on scroll for your Shopify store.
Blog: websensepro.com/blog/how-to-m...
Timestamps:
00:00 - Introduction
03:45 - Code Instructions
05:40 - Implementing Transparent Header
11:40 - Conclusion
Shopify Store For Just 1$/Month: shopify.pxf.io/XYRLdX
👉👉How To Secure Your Shopify Store - [Defendify Copyright AntiTheft] • How To Secure Your Sho...
👉👉 How To Show Discount/Sale Badge in Shopify: • How To Show Discount/S...
👉👉 How To Add Password Protected Collection For Shopify - Updated: • How To Add Password Pr...
👉👉 How To Add Video On Shopify Homepage With Autoplay: • How To Add Video On Sh...
Transparent Header Playlist 👉👉👉kzread.infoPLvT_6E7...
If you want help with Shopify Customization, store development, or any other web development help. Contact us via websensepro.com/contact-us
Пікірлер: 83
Thank you so much! This was a great help!
@WebSensePro
Ай бұрын
You're welcome!
This one worked perfectly! I used it on another theme and it worked just as well. Thank you so much!
@WebSensePro
17 күн бұрын
You're welcome!
you are amazing. Only your tutorial worked for some reason. I am not someone who understands coding your video helped me a lot
@WebSensePro
Күн бұрын
You're welcome!
You D Man! Thank you for this video.
@WebSensePro
Ай бұрын
Glad to help!
Worked great with Sense Theme. Hopyfully we will soon be able to use this with the mobile site as well. Thanks for uploading.
@WebSensePro
20 күн бұрын
You're welcome!
Thanks for this amazing video. Keep up the good work. I've implemented this and it worked as described. There's a couple of things I'd like to suggest to improve the functionality. 1. The Enable on Homepage selector is great for limiting the transparent header to the homepage. Excellent. However the choice to either enable on homepage vs the whole site isn't really useful because then you need a banner on every single page, including product pages. An option to extend the transparent header to a) collection pages and b) CMS pages/blog pages would be ideal. 2. Another great inclusion would be to enable a different color scheme specifically for the transparent header. This would give greater flexibility over which banners can be used. Great tutorial, keep up the good work!
@WebSensePro
2 ай бұрын
Thanks for suggestion
super good bro
@WebSensePro
Ай бұрын
Thank you so much
This is so nice, Can u pls make a header tutorial as same Iike stiletto ?
@WebSensePro
2 ай бұрын
What's stiletto?
Broo, very good tutorial thanks, I wanted to know if you could do a tutorial on how to make the sub categories of the Header to scroll down, also put a background of the chosen color?
@WebSensePro
2 ай бұрын
Not sure what you need bro, need more details
thank tou so much
@WebSensePro
Ай бұрын
Your welcome
Thank you so much for this tutorial! It made adding a transparent header so easy. Do you have any tips on how to make the transparent header solid when hovering? I noticed the drop down will remain transparent when hovering and is difficult to read. I'll play around with it in the meantime. Thank you again!!
@WebSensePro
2 ай бұрын
Yes it's easily with CSS and JS code
thank you! I there a way to keep the menu transparent while scrolling?
Great video, extremely helpful. Is there a way to make it solid when hovering? I noticed the sub menu drop down list will remain transparent. It makes it extremely difficult to read and select the sub pages. Appreciate your insight.
@WebSensePro
2 ай бұрын
Yes it's a feature which I am going to release in a next video
Waiting on the version of this that works with mobile ! Thank you
@WebSensePro
Ай бұрын
Will try
@widerahoob1
Ай бұрын
@@WebSensePro Looking forward to it
@baharfaridani5475
23 күн бұрын
@@WebSensePro Hi please make it work on mobile
Thanks again! Is there any tutorial about using the mobile hamburger menu on desktop on the Dawn theme?
@WebSensePro
Ай бұрын
Mega menu video coming next week
Hi bro! Thanks for sharing this golden information! Im already make it, all good, but now in mobile version header overlay in my product picture, so how to add space in mobile version?
@WebSensePro
2 ай бұрын
Will update this for mobile version
We're waiting for the Mobile version! can't wait till you update us :)
@WebSensePro
Ай бұрын
Coming next week
@LightYourWay
Ай бұрын
@@WebSensePro Hey is it coming this week ? Waiting for it :)
Would love if you could change the font colour when you hover on the navigation bar. E.g. Have 'White' text on a transparent background then when you hover you mouse over the nav bar, the nav bar background changes to white with 'Black' text. 👍
@WebSensePro
Ай бұрын
Yes updated version will have this feature
Thank you for your video, everything looks amazing! I have one issue, though: when I navigate from a page to another the header glitches for a second. How can I fix that?
@WebSensePro
Ай бұрын
Will have to check your theme why it's doing that for Premium Support contact websensepro.com/contact-us
hello websensePro, u helped me with a lot. thankyou for that appreciate your content. i added a transparant video header. But now i want to add a 'shop now' button on top the header. how can i add this button ?
@WebSensePro
Ай бұрын
We are preparing updated version for dawn 14.0.0 stay tuned
these settings are only working properly on desktop version for mobile its not working specially the only home page transparent thing if you could fix that please try and thanks for the video
@WebSensePro
2 ай бұрын
Yes it's a known issue for mobile issue. We are working for the fix
@themorningchoice
10 күн бұрын
@@WebSensePro any news please ? 🙏
Thanks for the tip! Unfortunately this is not working when I want to align my site logo to middle center, it will just disappear
@rshandmusic
Ай бұрын
The toggle transparent header only on home page feature is not working on mobile either unfortunately. Hopefully you can help with a solution for this :)
@WebSensePro
20 күн бұрын
Please contact via websensepro.com/contact-us for paid support
Could this be used on Sense 14.0? I tried but the enable transparent header didn't work
@WebSensePro
21 күн бұрын
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
Hello! I did it but my logo image is white and when I go to products or other pages with white background it can’t be seen, is it possible to change the logo image color for other pages?
@WebSensePro
Ай бұрын
Not possibel
Hi I tried to do as you taught but after I checked the box in Transparent it made all my menus disappear. How should I fix it?
@WebSensePro
Ай бұрын
Did you duplicate your theme before adding this code?
Works Great but my header logo isn't showing up. Any fix?
@WebSensePro
Ай бұрын
Thats weird, are you on dawn 13.0.1?
Hi, im stuck at second step. This message is displayed : Liquid syntax error (line 97): 'endunless' is not a valid delimiter for style tags. use endstyle Can someone help me please ?
@WebSensePro
Ай бұрын
Please go through video again. It shouldn't be a problem
It works great for the computer version but not for the mobile version, on which the logo remains transparent on all the pages while we only want it on the home page. Do you have a solution???? Pleaseeee !!! 😇
@WebSensePro
Ай бұрын
Yes, updated video coming next week for Dawn 14.0.0
Thanks, but I have a question, how do I solve this logo does not appear at the top of the page?
@cesarmartinez5322
2 ай бұрын
I have the same issue
@jacobblair1246
2 ай бұрын
Have the same issue as well
@WebSensePro
Ай бұрын
Which version of the logo is not showing up? A little more information will help us help you
@gabyvandenborn9089
Ай бұрын
@@WebSensePro Hi, I'm encountering the same issue. The one on the transparent header isn't showing when placed in the middle, but on the sticky header, it is. Thanks...
does this still work for dawn theme version 14.0.0?
@WebSensePro
Ай бұрын
Updated video will be released next week
I try it on my store on Dawn theme 14.0.0 but it seems to be off. My logo doesn't appears at all, and my store name font seems incorrect. Can anyone confirm ?
@WebSensePro
20 күн бұрын
Please contact via websensepro.com/contact-us for paid support
Hi, tried this on Dawn 14, but unable to save the codes. Hopefully u can show how to do “transparent header for Dawn 14”. Thanks in advance!
@WebSensePro
Ай бұрын
Coming next week
@michelle_choo
Ай бұрын
@@WebSensePro 👍🏼
It worked for desktop but now I can't see the hamburger menu on the mobile version, is there a way to fix this please?
@WebSensePro
27 күн бұрын
Yes it's doable but will have to check the store. Please contact via websensepro.com/contact-us for paid support
The logo and menu doesn’t show on mobile, how can we fix this?
@WebSensePro
Ай бұрын
Next tutorial will have new feature for Mobile
How about the mobile version?
@WebSensePro
Ай бұрын
Updated video coming next week
can you add a mobile solution
@WebSensePro
20 күн бұрын
Please contact via websensepro.com/contact-us for paid support
not good in mobile
@WebSensePro
Ай бұрын
Updated video coming next week
@instant_sours9807
Ай бұрын
@@WebSenseProwhen? Is it online yet?