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

  • @LEDPalette
    @LEDPalette2 ай бұрын

    Thank you so much! This was a great help!

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    You're welcome!

  • @alantascione754
    @alantascione75418 күн бұрын

    This one worked perfectly! I used it on another theme and it worked just as well. Thank you so much!

  • @WebSensePro

    @WebSensePro

    17 күн бұрын

    You're welcome!

  • @sinemdurmus2219
    @sinemdurmus22197 күн бұрын

    you are amazing. Only your tutorial worked for some reason. I am not someone who understands coding your video helped me a lot

  • @WebSensePro

    @WebSensePro

    Күн бұрын

    You're welcome!

  • @MartinFoster-si7nk
    @MartinFoster-si7nkАй бұрын

    You D Man! Thank you for this video.

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Glad to help!

  • @user-cq1mr9rd8l
    @user-cq1mr9rd8lАй бұрын

    Worked great with Sense Theme. Hopyfully we will soon be able to use this with the mobile site as well. Thanks for uploading.

  • @WebSensePro

    @WebSensePro

    20 күн бұрын

    You're welcome!

  • @hollymarshall5257
    @hollymarshall52573 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Thanks for suggestion

  • @bevatar5251
    @bevatar5251Ай бұрын

    super good bro

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Thank you so much

  • @praveenbalaji2279
    @praveenbalaji22792 ай бұрын

    This is so nice, Can u pls make a header tutorial as same Iike stiletto ?

  • @WebSensePro

    @WebSensePro

    2 ай бұрын

    What's stiletto?

  • @EXSTRY
    @EXSTRY2 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Not sure what you need bro, need more details

  • @laughoutloudvideos6337
    @laughoutloudvideos63372 ай бұрын

    thank tou so much

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Your welcome

  • @grandtrinedesigns
    @grandtrinedesigns3 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Yes it's easily with CSS and JS code

  • @PoweerXD
    @PoweerXD11 күн бұрын

    thank you! I there a way to keep the menu transparent while scrolling?

  • @canucksboi923
    @canucksboi9232 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Yes it's a feature which I am going to release in a next video

  • @LightYourWay
    @LightYourWayАй бұрын

    Waiting on the version of this that works with mobile ! Thank you

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Will try

  • @widerahoob1

    @widerahoob1

    Ай бұрын

    @@WebSensePro Looking forward to it

  • @baharfaridani5475

    @baharfaridani5475

    23 күн бұрын

    @@WebSensePro Hi please make it work on mobile

  • @caldasnake16
    @caldasnake162 ай бұрын

    Thanks again! Is there any tutorial about using the mobile hamburger menu on desktop on the Dawn theme?

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Mega menu video coming next week

  • @sergeyglushakov6002
    @sergeyglushakov60022 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Will update this for mobile version

  • @elianvandenbos5749
    @elianvandenbos5749Ай бұрын

    We're waiting for the Mobile version! can't wait till you update us :)

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Coming next week

  • @LightYourWay

    @LightYourWay

    Ай бұрын

    @@WebSensePro Hey is it coming this week ? Waiting for it :)

  • @jacobblair1246
    @jacobblair12462 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Yes updated version will have this feature

  • @beatricesola4449
    @beatricesola44492 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Will have to check your theme why it's doing that for Premium Support contact websensepro.com/contact-us

  • @elianvandenbos5749
    @elianvandenbos57492 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    We are preparing updated version for dawn 14.0.0 stay tuned

  • @BABYHIVE-ox3jj
    @BABYHIVE-ox3jj2 ай бұрын

    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

    @WebSensePro

    2 ай бұрын

    Yes it's a known issue for mobile issue. We are working for the fix

  • @themorningchoice

    @themorningchoice

    10 күн бұрын

    @@WebSensePro any news please ? 🙏

  • @rshandmusic
    @rshandmusicАй бұрын

    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

    @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

    @WebSensePro

    20 күн бұрын

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

  • @RuujiInternational
    @RuujiInternationalАй бұрын

    Could this be used on Sense 14.0? I tried but the enable transparent header didn't work

  • @WebSensePro

    @WebSensePro

    21 күн бұрын

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

  • @andreamolinari5975
    @andreamolinari59752 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Not possibel

  • @ketwalee1112
    @ketwalee1112Ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Did you duplicate your theme before adding this code?

  • @user-ip6eq8rk1q
    @user-ip6eq8rk1qАй бұрын

    Works Great but my header logo isn't showing up. Any fix?

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Thats weird, are you on dawn 13.0.1?

  • @babyyakuza
    @babyyakuza2 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Please go through video again. It shouldn't be a problem

  • @paulplantade9419
    @paulplantade94192 ай бұрын

    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

    @WebSensePro

    Ай бұрын

    Yes, updated video coming next week for Dawn 14.0.0

  • @Burjuvaz
    @Burjuvaz2 ай бұрын

    Thanks, but I have a question, how do I solve this logo does not appear at the top of the page?

  • @cesarmartinez5322

    @cesarmartinez5322

    2 ай бұрын

    I have the same issue

  • @jacobblair1246

    @jacobblair1246

    2 ай бұрын

    Have the same issue as well

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Which version of the logo is not showing up? A little more information will help us help you

  • @gabyvandenborn9089

    @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...

  • @zewearsy
    @zewearsy2 ай бұрын

    does this still work for dawn theme version 14.0.0?

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Updated video will be released next week

  • @phuonglaky8720
    @phuonglaky872020 күн бұрын

    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

    @WebSensePro

    20 күн бұрын

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

  • @michelle_choo
    @michelle_chooАй бұрын

    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

    @WebSensePro

    Ай бұрын

    Coming next week

  • @michelle_choo

    @michelle_choo

    Ай бұрын

    @@WebSensePro 👍🏼

  • @MiaRose-pk5po
    @MiaRose-pk5po29 күн бұрын

    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

    @WebSensePro

    27 күн бұрын

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

  • @pierrotnko6213
    @pierrotnko62132 ай бұрын

    The logo and menu doesn’t show on mobile, how can we fix this?

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Next tutorial will have new feature for Mobile

  • @SyakabolKatalaga
    @SyakabolKatalaga2 ай бұрын

    How about the mobile version?

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Updated video coming next week

  • @AleksaBrkic
    @AleksaBrkicАй бұрын

    can you add a mobile solution

  • @WebSensePro

    @WebSensePro

    20 күн бұрын

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

  • @AmarabanduRupasinha
    @AmarabanduRupasinha2 ай бұрын

    not good in mobile

  • @WebSensePro

    @WebSensePro

    Ай бұрын

    Updated video coming next week

  • @instant_sours9807

    @instant_sours9807

    Ай бұрын

    @@WebSenseProwhen? Is it online yet?

Келесі