How To Make A Transparent Header In Shopify

  Рет қаралды 53,176

OnHOW

OnHOW

Жыл бұрын

In this video i will show you how to make a transparent header in Shopify with dawn theme or any theme to add sticky transparent header to your Shopify store.
We all know the importance of making a transparent header in your Shopify store because transparent headers are essential for creating a modern and professional look for your e-commerce store, they also help create an inviting atmosphere that encourages customers to explore further into your Shopify store.
Transparent headers on Shopify make it eye-candy for visitors to find what they’re looking for while enjoying the navigation through your store, as well as providing them with the ability to navigate more easily around the site without having too much clutter on their screen at once.
With sticky transparent headers you can draw attention directly onto specific elements or products within your store that you want customers to focus on first, such as sales items or featured collections while still allowing them access all other areas of the site if necessary, thats why adding a transparent header is one small but powerful step towards improving customer satisfaction levels within your Shopify store.
Transparent Header Code : pastebin.com/H2W1YahF
⚠️NOTE ⚠️: if the code above didn't work try the new one below :
Transparent header V2 Code : pastebin.com/Vv1b1VYS
If you have any questions or suggestions my Instagram : / anas_elmedlaoui
About me:
My name is Anas El Medlaoui and i have been around digitally for 8 years making Websites, Mobile Applications, Social Media Promotions, E-commerce etc...
And i have accumulated some experience in multiple fields over the years jumping from project to project (Which wasn't a good idea), I started this KZfaq channel after a year of hesitation to share my knowledge and experience with people that are willing to succeed online with the theory of knowledge for everyone.
#transparent #header #shopify

Пікірлер: 373
@mr.c9846
@mr.c9846 9 ай бұрын
If you want to adjust the transparency of the header, here's what you need to do: In his code, replace the word "transparent" with "rgba(255, 255, 255, 0.5)" The RGB is how you adjust the colour, and the A is how you adjust the alpha, or transparency. In my example, the header would turn out white with 50% (0.5) transparency. Play around with these values to adjust the colour and transparency.
@amandarodrigueztejeda8098
@amandarodrigueztejeda8098 5 ай бұрын
thanks for the tip! do you know how to make it white when scrolling?
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Thanks legend.
@Gorb0312
@Gorb0312 3 ай бұрын
bro, this only works on the main page, how can I do it on all?
@OracleEntertainment-yn7zq
@OracleEntertainment-yn7zq Ай бұрын
thank you brother ive been sat here for hours and now ive finally done it you're an absolute hero fella
@d.tirado858
@d.tirado858 8 ай бұрын
This is one of the BEST CHANNELS in KZfaq, this guy is building my business... Thank you Anas
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome and thank you for the nice comment. Cheers
@BlissfulBottoms
@BlissfulBottoms 11 ай бұрын
mate !!!! you are an absolutely legend 🥰 i scratching my head for ages how to do it in my store 🙄 it looks amazing , thank you so much , top lad !!!!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome and glad i could help. Cheers
@solus-x3248
@solus-x3248 10 ай бұрын
After using so many failed codes, I was so happy when this one worked for me! Thank you so much!!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome and glad i could help. Cheers
@AtlasHomeShop
@AtlasHomeShop 3 ай бұрын
Fantastic Video Bro, never stop posting these
@nightf0x-eve199
@nightf0x-eve199 3 ай бұрын
thank you for the detailed video. I'm migrating from Squarespace and wanted to keep the branding and feel of my old page and this worked great in doing so. :)
@seanstoney2767
@seanstoney2767 5 ай бұрын
Bro thanks so much I’m definitely coming here for more tutorials
@jennypaige-mclean3206
@jennypaige-mclean3206 9 ай бұрын
this literally worked first time and its so simple. keep up the good work!!!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Glad it did and You're very welcome. Cheers
@user-uf3nd7rl8n
@user-uf3nd7rl8n 2 ай бұрын
thank you so much, best Channel ever!!!
@shynowinfonua2683
@shynowinfonua2683 3 ай бұрын
That was brilliant. Thank you so much for your help 💥
@millanaross8597
@millanaross8597 Жыл бұрын
Such a great video, so simple yet helpful!! 👍👍👍
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thank you and really glad i could help. My pleasure. Cheers
@reactormusic8394
@reactormusic8394 3 ай бұрын
subscription came in !! amazing work !!!
@ahbe9232
@ahbe9232 Жыл бұрын
you're the best broski
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Thanks
@bcwell
@bcwell Жыл бұрын
Helped a lot, thank you!
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Really glad i did. Cheers
@rafaelvp7
@rafaelvp7 10 ай бұрын
Great job! you're a legend!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Thanks, i appreciate that. Cheers
@Yasibanoo
@Yasibanoo 2 ай бұрын
Thank you so much ♥️
@drjinx3447
@drjinx3447 5 ай бұрын
Great tutorial man, thanks!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Glad you liked it!
@rochelleramos8651
@rochelleramos8651 8 ай бұрын
Perfect, thanks!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@SultanAhmed-oy2zc
@SultanAhmed-oy2zc 9 ай бұрын
you rock man thank you
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@juergen_watschka
@juergen_watschka 7 ай бұрын
Thank you, for your Video!!! The best explaining 😁
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome and thank you. Cheers
@federicocaruso1841
@federicocaruso1841 9 ай бұрын
thank you, really helpful
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome, glad it was. Cheers
@user-sl8nz5hh6g
@user-sl8nz5hh6g 6 ай бұрын
You are the best you are the guy i depend on and your a lifesaver when i want to make my store look better thank you and keep going pleasee🙏🙏
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
I appreciate that and you're very welcome, glad i could help. Cheers
@noahrianni
@noahrianni Жыл бұрын
amazing! so helpful!
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thanks, really glad it was. Cheers
@joaofabiao5773
@joaofabiao5773 3 ай бұрын
What incredible content you have on your channel! I've already smashed the like and subscribe buttons several times, keep up the good work!
@troyedwards9288
@troyedwards9288 Жыл бұрын
PURE GOLD
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thanks
@jesusguerra2506
@jesusguerra2506 11 ай бұрын
I got it thank you so much!! Amazing bro ❤
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome and glad i could help. Cheers
@gersonadonis6791
@gersonadonis6791 14 күн бұрын
Great!!!! muchas gracias funciona perfecto!! un abrazo
@9akup
@9akup Жыл бұрын
Bro you are the best 👍🏼👍🏼👍🏼 thanks
@OnHOWGuy
@OnHOWGuy Жыл бұрын
You're very welcome, glad i could help and thank you. Cheers
@lukask3859
@lukask3859 7 ай бұрын
It works on Craft theme :) Thank you!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome, glad i could help. Cheers
@kristinakock8888
@kristinakock8888 11 ай бұрын
THAAAAANK YOU!!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@memolim34
@memolim34 4 ай бұрын
I LOVE U BRO
@productukivo5695
@productukivo5695 11 ай бұрын
You're a G!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Thanks
@lacheleboone286
@lacheleboone286 11 ай бұрын
Thank you very much.
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@andresvera1520
@andresvera1520 Жыл бұрын
Really helpfull!
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Glad it was. Cheers
@AppKub323
@AppKub323 10 ай бұрын
Thank you ❤
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome
@dr.kfanacc
@dr.kfanacc Жыл бұрын
thankyou so much
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome
@user-wy6gj9ce9n
@user-wy6gj9ce9n 11 ай бұрын
Thanks!
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome
@nwanebunkemjika7822
@nwanebunkemjika7822 10 ай бұрын
Thanks worked
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@Royaloomfashion
@Royaloomfashion 7 ай бұрын
nice video bro thank you so much
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome. Cheers
@tbmadeitt
@tbmadeitt 10 ай бұрын
Thank you very much
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome
@TheWorstTrader35
@TheWorstTrader35 Жыл бұрын
😄😄😄 Anas you are pure gold my brother. once your channel gets picked up by the youtube algo, your tipps & tricks will change the whole dropshipping game
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thank you brother, i appreciate your words and made me smile so thank you. I'l keep doing my thing and it will work out for sure. Thanks again Cheers
@user-by1xi9pl5i
@user-by1xi9pl5i Жыл бұрын
@@OnHOWGuy Thank you bro god bless you
@OnHOWGuy
@OnHOWGuy Жыл бұрын
@@user-by1xi9pl5i You're welcome
@perryhope8164
@perryhope8164 5 ай бұрын
Thank you
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome
@wmtrombley
@wmtrombley Жыл бұрын
Thank you sir
@OnHOWGuy
@OnHOWGuy Жыл бұрын
You're welcome
@Aesthetic8Abyss
@Aesthetic8Abyss 8 ай бұрын
Thank you it worked perfectly! Is it suppose to still not be transparent on the product pages after the code is applied? or should it have made it transparent on every page?
@zakaa.m.v4790
@zakaa.m.v4790 Жыл бұрын
Bro you got a subscriber, nice video
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thanks brother, i appreciate that. Cheers
@theresenyamsi6734
@theresenyamsi6734 3 ай бұрын
Merci
@HasashiJin
@HasashiJin Ай бұрын
Hello thank you it worked but is there a way to fix the thin white line between the header and background that can slightly be seen?
@marketplace-ci7xx
@marketplace-ci7xx 3 ай бұрын
Hi man! I really like your videos! You're the best! Would you please explain how to do the same thing for other pages not just the home page? Thank you so much!
@praveenbalaji2279
@praveenbalaji2279 3 ай бұрын
Hi, I'm a subscriber of your page and i've been implementing most of your codes through video Thanks a lot for that, Also can you pls make an video of transparent header while we hover through the header then complete header to turn into one color and header font to another color, Maybe that may looks even more aesthetically good, What's your thought on that I'll be looking for this particular tutorial in your page, Your are doing great, Thanks for all your educational tutorials which is 100% working and easy to apply
@TheClrr
@TheClrr 11 ай бұрын
Hi Anas! Thank you for your video! Very simple and clear. So much appreciated. I have 2 questions: 1, How can i make it transparent for all the website? 2: How can i make it transparent for the password protected page? thanks!
@Saladifier
@Saladifier 9 ай бұрын
also wondering this, my main page is transparent but each other page is normal.
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Hey, you're very welcome. I will make an update video on how to stop header from being transparent on scoll and i will include your two requests. Cheers
@mercurybh3288
@mercurybh3288 Жыл бұрын
you are a beast
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Thanks legend, i appreciate that. Cheers
@MaderaDesignStudios
@MaderaDesignStudios 6 ай бұрын
Hi not sure if someone already asked this -- is there a way to put a color in the header once the visitor starts scrolling -- it is good at the top, but not down my page as you cannot see it as you move down. Thanks.
@AITesx
@AITesx 4 ай бұрын
I wonder the same thing, did you find a way?
@c9vision
@c9vision 3 ай бұрын
want to know the same thing please
@olehbav
@olehbav Ай бұрын
Hi, I found the solution. If it's still relevant for you, let me know.
@CEEZYsWorld
@CEEZYsWorld 14 күн бұрын
@@olehbav what is the solution
@danishakhtar1029
@danishakhtar1029 Жыл бұрын
thanks sir
@OnHOWGuy
@OnHOWGuy Жыл бұрын
You're welcome
@akshatvyas8664
@akshatvyas8664 Жыл бұрын
I was really tired of searching for this hack but still i searched it and it worked I'm happy bro tysm, I want to set the logo size big but it is taking up a lot of space and is unnecessary when I set the size large please guide me...
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Happy to help and you're very welcome. I used to spend days looking for one trick and i keep searching because i know im going to find it but if i stopped i'll never find it. you can easily change the logo size from the theme customizer where you uploaded your logo. If you have any further questions let me know. Cheers
@Vimana-Clothing
@Vimana-Clothing 14 күн бұрын
Hi Anas, Firstly, thank you so much for your videos and the time you dedicate to us ; these videos are incredibly helpful to us. I have a question regarding an issue I'm facing. I've enter the code and its work well in my pc and my google chrome, but it seems to have compatibility issues with Safari, Microsoft Edge, and similar applications. Could you please help me find a solution for this problem? Your assistance in this matter would be greatly appreciated, i really need your assistant.
@angryfishmusic436
@angryfishmusic436 10 ай бұрын
Oooh thanks you boy, it works perfectly for me and DAWN THEME But header i can’t put it of the top of the page ? Any idea
@janbondarenko4077
@janbondarenko4077 10 ай бұрын
Hello, im using the dawn theme. The Menu is sticky and it glitches out when i scroll down. Do you have a code to fix it?
@KetevanGorgiladze
@KetevanGorgiladze Ай бұрын
Hey, Your content is very helpful! do you have video about how to change logo on sticky Banner when scrolling down? thank you!
@vilgotsundin4973
@vilgotsundin4973 6 ай бұрын
Hey. Like the video but I have a problem that my banner and second page i blending together. It looks great on laptop view but when you change to phone it just gets way to up into the banner. It's like it can't notice that it has to stop under the banner. Hope you understand and have a tips to solve this!!
@sinaamiri98
@sinaamiri98 Күн бұрын
This is great, the only problem is that it doesn't look good on mobile for Dawn theme for the image banner which is usually your landing page
@samanthasellsalabama
@samanthasellsalabama 11 ай бұрын
The main menu on mobile is translucent. How can I make it smaller and I can still in see it? I like the way the main header is on the desktop. I don’t think you can have that same one on mobile. Any suggestions would help😮
@ChrisFlex
@ChrisFlex 11 ай бұрын
Amazing and helpful video! I am wondering how we can adjust the transparency level? I don't see a percentage option in the code. (Beginner here, lol)
@mr.c9846
@mr.c9846 9 ай бұрын
If you want to adjust the transparency of the header, here's what you need to do: In his code, replace the word "transparent" with "rgba(255, 255, 255, 0.5)" The RGB is how you adjust the colour, and the A is how you adjust the alpha, or transparency. In my example, the header would turn out white with 50% (0.5) transparency. Play around with these values to adjust the colour and transparency.
@meriembariki9583
@meriembariki9583 9 ай бұрын
hello thanky you for the video , I have a question it only did work on the home page but was not applied to the products pages
@charliecocalon9653
@charliecocalon9653 3 ай бұрын
because it was suppose to. change the "index".
@Gymprank2023
@Gymprank2023 2 ай бұрын
"I thank you so much."
@mohamedlahbibbenkalifa9684
@mohamedlahbibbenkalifa9684 6 ай бұрын
good job Bro
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
Thank you
@Andyl301
@Andyl301 2 ай бұрын
what should i do if i want a sticky header to be showing the color as i choose the schem color when scrolling down?
@natalyaodernatascha
@natalyaodernatascha 2 ай бұрын
Hey, this code is fantastic! But unfortunately it also made my announcement bar transparent. How can I fix it? Hope you can help.
@kwa66666
@kwa66666 11 ай бұрын
thansk you
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're welcome.
@wundersprite
@wundersprite 9 ай бұрын
Is there a way to still have the announcement bar in the header to be a solid color at the top? Thanks so much for the video, and the videos on your channel! They've been saving me a lot of time and are super helpful. Keep up the great work!
@Andr0Boy
@Andr0Boy 8 ай бұрын
just remove this part : .shopify-section-group-header-group.announcement-bar-section{ height: 5px; }
@sdasdasdsadadad1116
@sdasdasdsadadad1116 7 ай бұрын
I m a newbie, but i figuried that u should just delete lines 4, 5, 6: ".shopify-section-group-header-group.announcement-bar-section{ height: 5px; }" So do this and everything must be smooth:)
@amandarodrigueztejeda8098
@amandarodrigueztejeda8098 5 ай бұрын
i have the same doubt
@cherishunaturalbathandbody
@cherishunaturalbathandbody 4 ай бұрын
In the code, I changed the announcement height to 35 px so I code still see it in color.
@brittanypemberton7206
@brittanypemberton7206 3 ай бұрын
Thank you!! This was perfect for what I was trying to do!!@@cherishunaturalbathandbody
@fadwa4643
@fadwa4643 Жыл бұрын
I am curious to discover how 😀 I like before I see 🎉
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Then here it is for you haha. Thank you, i appreciate that. Cheers
@shamsbt
@shamsbt Ай бұрын
amazing video! what if we want the header to be transparent for every page not just the homepage
@distrec2079
@distrec2079 Жыл бұрын
it made my Announcement bar smaller fix?
@Hustle_Nation
@Hustle_Nation 5 ай бұрын
I just did this and it made my announcements bar transparent too.
@user-nr8qs5fm1o
@user-nr8qs5fm1o 10 ай бұрын
Thank you for thw video! One question! When I did it, the announcement bar got weird and i dont know how to fix it! If you could help, i would aprecciate it
@Jangys-jh3hr
@Jangys-jh3hr Ай бұрын
I got a same problem. Who fixed it?
@user-mi3ur3nz3l
@user-mi3ur3nz3l 7 ай бұрын
How do I add my main menu like contact us and about and catalog to the header bc mine is on the side panel with the 3 lines and it’s a side panel to see everything
@getrealwithmya
@getrealwithmya 4 ай бұрын
Thank you 😊 It’s works, but it doesn’t work for mobile version. Can you please help.
@Dawn-xn5qg
@Dawn-xn5qg 9 ай бұрын
I've found your videos really helpful, thank you! However, since making the header transparent, the search, account, and basket icons that were present have disappeared and I've tried everything to bring them back but can't. I really need this on my page as I have a large amount of items. Can you help with this please???
@Shanheard2212
@Shanheard2212 10 ай бұрын
hi! your videos are really helping me! do you have a video on how to make an automatic video clickable? I followed your video on adding a video to a homepage, and this one to make the header transparent.. now Id like people to be able to click the video to go to my products page.
@SheLikeTheWayThatIWoo
@SheLikeTheWayThatIWoo 3 ай бұрын
can u make it like half transparent? Like opaque?
@mathiashusby7065
@mathiashusby7065 4 ай бұрын
How can this be done for several pages? I could only get it to change the main page template. Any advice is appreciated. Thanks!
@nishamohan6274
@nishamohan6274 11 ай бұрын
Hi Anas, It does not work in minimal theme. Did you get to test it in minimal theme?
@DaNi-tt8dl
@DaNi-tt8dl 5 ай бұрын
Hi, I'm using Combine theme (bought it). But the header is transparant on every page except the card page. Now cutomers cant see the menu if the are in at the card page, can you help me with that. I just want transparant header on every single page
@pietrog6141
@pietrog6141 Жыл бұрын
hey mate thx for your tutorials always super helpful. How do you make a transparent section in general? I mean not just the header
@OnHOWGuy
@OnHOWGuy Жыл бұрын
Hey, you very welcome. Your store's background is a solid color (white, black...) so when you want something as transparent you need to have something behind it so it will transparent to that background but when you have white color as background then whats the point ? if you want to set a background image to only a section then check out my channel i already made that video, and that actually is a transparent background to some extent. Cheers
@pietrog6141
@pietrog6141 Жыл бұрын
@@OnHOWGuy Thank you, Anas, for your prompt response. I'm encountering an issue where the banner I'm using partially overlaps with my header, which is composed of a video loop, at the top. Consequently, it covers a section of the logo within the header. Since the banner only displays the word "welcome," one possible solution could be directly adding this text to the header. However, I'm uncertain about how to go about implementing this. any tip?
@OnHOWGuy
@OnHOWGuy Жыл бұрын
@@pietrog6141 You're welcome, ahh i see. This might be complicated to fix from my end as that has to do with what theme, version you using plus how did you add that video banner. Did you use my trick ? because i made a video on how to add video banner as well as transparent header. Also what theme are you using ? cheers
@pietrog6141
@pietrog6141 Жыл бұрын
@@OnHOWGuy hi Anas, I fixed the problem adding an extra banner in the middle. Thx for your answer ,looking forward to see more new videos from you
@OnHOWGuy
@OnHOWGuy Жыл бұрын
@@pietrog6141 Hey, Really glad you did. You're very welcome and thanks, i appreciate that. Cheers
@user-zq2tx5od5o
@user-zq2tx5od5o 7 ай бұрын
Thanks for the amazing video! Is it possible to still leave the annoucment bar black?
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
You're very welcome, it has separate options on the theme customizer and you can set a different color for it. Cheers
@blaqkz3671
@blaqkz3671 11 ай бұрын
How do I make the header not invisible when selecting categories on the handy version?
@kevinfagerliljah4712
@kevinfagerliljah4712 11 ай бұрын
it dose not work for me but i have done the come that can make your background to a image those that have anything to do with it?
@muhammadhannankhan3554
@muhammadhannankhan3554 Жыл бұрын
hi bro i facing lots of issue 1 background gif is not working on the dawn theme 2 the header it so croped
@James-wk6jd
@James-wk6jd 8 ай бұрын
I'm using Beyond theme and it does not work for me. Any thoughts?
@cherishunaturalbathandbody
@cherishunaturalbathandbody 4 ай бұрын
This is great! Is there a way to make it turn a color on scroll.
@olehbav
@olehbav Ай бұрын
Hi, I found the solution. If it's still relevant for you, let me know
@Homardlecrustace
@Homardlecrustace 10 ай бұрын
Can you explain how to get the banner to stop being transparent on scroll and on hover please ? this would mean a lot
@auricooper
@auricooper 9 ай бұрын
This would be very helpful thanks!
@helderwrld
@helderwrld 8 ай бұрын
@@auricooper We need this!
@christiancastano8369
@christiancastano8369 8 ай бұрын
any updates ?
@momesz27
@momesz27 8 ай бұрын
yes pleaseee @onhow
@NOODIDDYY
@NOODIDDYY 7 ай бұрын
Buddy dude I thought you working for us? The people need this
@HồngKhoan-q5v
@HồngKhoan-q5v 18 сағат бұрын
it also change product page header to transparent. can you set up only homepage title to Transparent? thanks
@markotuya6912
@markotuya6912 8 ай бұрын
how do i make all the headers on different pages transparent
@edwardotesanya8003
@edwardotesanya8003 Ай бұрын
how would i do the same thing but on the footer, ive tried replacing "header" with "footer" but did not work
@arielbooker1121
@arielbooker1121 11 ай бұрын
Your videos are a game changer! I’ve made the transparent header & video banner thanks to your videos. But the announcement bar is cut off with part of the video header. How do I fix this??
@endiium
@endiium 9 ай бұрын
did you fixed it? I have the same issue.
@BensP0V
@BensP0V 6 ай бұрын
hi! i was having the same problem but i fixed it ehehe , so... when you are copying the code for the theme.liquid you must change this section: .shopify-section-group-header-group.announcement-bar-section{ height: 5px; replace the 5px for 35px (my advice) , or test the values at your own taste Hope this helps anyone who's having the same issue. Stay safe!
@arturollontopzapata5507
@arturollontopzapata5507 5 ай бұрын
Thanks friend, I had the same problem but I solved it with your contribution. Thank you so much@@BensP0V
@ikergg2516
@ikergg2516 5 ай бұрын
@@BensP0V thank you so much
@BensP0V
@BensP0V 5 ай бұрын
@@ikergg2516 it was my pleasure 👌
@lukassp6692
@lukassp6692 4 ай бұрын
How to do the same but in collection page?
@ameercheema-nz8tu
@ameercheema-nz8tu Ай бұрын
Hello i changed my menu bar but now the problem is when i scroll down on the page the whole menu bar scrolls down also it wont stay fixed in one place i am using the refresh theme please can you help me?
@tirthanksolanki895
@tirthanksolanki895 11 ай бұрын
Hey I want to know if it's possible like when I scroll down the Transparent header should turn to normal header like with a colour Bg
@OnHOWGuy
@OnHOWGuy 5 ай бұрын
I got that request and i will work on it. Cheers
@luminVerse_OldMoneyFashion
@luminVerse_OldMoneyFashion 4 ай бұрын
@@OnHOWGuy there you go, i commented the wrong one XD, you just need to edit the number " 0.8" in background-color: rgba(255, 255, 255, 0.8) .shopify-section-group-header-group.announcement-bar-section{ height: 36px; } .header-wrapper{ position: absolute; width: 100%; background: transparent; } .header-wrapper .header{ margin-top: 0px; } .header-wrapper { transition: background-color 0.3s ease; } .header-wrapper .header { background-color: rgba(255, 255, 255, 0); /* Initial transparency level */ transition: background-color 0.3s ease; /* Animation duration and easing */ } .header-wrapper .header:hover { background-color: rgba(255, 255, 255, 0.8); /* Opacity when hovered */ }
@olehbav
@olehbav Ай бұрын
Hi, I found the solution. If it's still relevant for you, let me know.
@marcoantonioreyescoronado9519
@marcoantonioreyescoronado9519 11 ай бұрын
I'm using theme 1, the default one.
@naturalbeautyvirgo
@naturalbeautyvirgo 9 ай бұрын
What about an image I want to make transparent? For example logo on the image. How do I make that transparent?
OMG🤪 #tiktok #shorts #potapova_blog
00:50
Potapova_blog
Рет қаралды 18 МЛН
Heartwarming: Stranger Saves Puppy from Hot Car #shorts
00:22
Fabiosa Best Lifehacks
Рет қаралды 12 МЛН
Wait for the last one! 👀
00:28
Josh Horton
Рет қаралды 127 МЛН
How To Make A Transparent Header in Shopify [Dawn 13.0.1]
13:10
WebSensePro
Рет қаралды 3,1 М.
How to Make Your MOBILE Shopify Store Look Better [QUICK TIPS]
14:12
Unleashing 3D Magic on Shopify with Midjourney - A Game Changer!
5:30
Landing Page Dudes
Рет қаралды 28 М.
How To Show Transparent Header in Dawn Theme V13 [2024]
14:30
WebSensePro
Рет қаралды 4,9 М.
How To Make A Transparent Header in Shopify [Dawn V14]
12:27
WebSensePro
Рет қаралды 1 М.
How to Make Custom Shopify Mega Menu in Dawn Theme
16:14
Fayyaz Ahmed
Рет қаралды 4,9 М.
Shopify Header Design | Dawn Theme Customization
6:36
Jason Gandy
Рет қаралды 10 М.