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

5 ай бұрын

thanks for the tip! do you know how to make it white when scrolling?

@OnHOWGuy

4 ай бұрын

Thanks legend.

@Gorb0312

2 ай бұрын

bro, this only works on the main page, how can I do it on all?

This is one of the BEST CHANNELS in KZread, this guy is building my business... Thank you Anas

@OnHOWGuy

4 ай бұрын

You're very welcome and thank you for the nice comment. Cheers

thank you brother ive been sat here for hours and now ive finally done it you're an absolute hero fella

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

4 ай бұрын

You're very welcome and glad i could help. Cheers

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. :)

After using so many failed codes, I was so happy when this one worked for me! Thank you so much!!

@OnHOWGuy

4 ай бұрын

You're very welcome and glad i could help. Cheers

Bro thanks so much I’m definitely coming here for more tutorials

this literally worked first time and its so simple. keep up the good work!!!

@OnHOWGuy

4 ай бұрын

Glad it did and You're very welcome. Cheers

Such a great video, so simple yet helpful!! 👍👍👍

@OnHOWGuy

Жыл бұрын

Thank you and really glad i could help. My pleasure. Cheers

That was brilliant. Thank you so much for your help 💥

Fantastic Video Bro, never stop posting these

thank you so much, best Channel ever!!!

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

4 ай бұрын

I appreciate that and you're very welcome, glad i could help. Cheers

Thank you, for your Video!!! The best explaining 😁

@OnHOWGuy

4 ай бұрын

You're very welcome and thank you. Cheers

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?

Helped a lot, thank you!

@OnHOWGuy

Жыл бұрын

Really glad i did. Cheers

Thank you so much ♥️

What incredible content you have on your channel! I've already smashed the like and subscribe buttons several times, keep up the good work!

Great tutorial man, thanks!

@OnHOWGuy

4 ай бұрын

Glad you liked it!

subscription came in !! amazing work !!!

I got it thank you so much!! Amazing bro ❤

@OnHOWGuy

4 ай бұрын

You're welcome and glad i could help. Cheers

PURE GOLD

@OnHOWGuy

11 ай бұрын

Thanks

Perfect, thanks!

@OnHOWGuy

4 ай бұрын

You're very welcome

thank you, really helpful

@OnHOWGuy

4 ай бұрын

You're very welcome, glad it was. Cheers

you're the best broski

@OnHOWGuy

4 ай бұрын

Thanks

It works on Craft theme :) Thank you!

@OnHOWGuy

4 ай бұрын

You're very welcome, glad i could help. Cheers

Great!!!! muchas gracias funciona perfecto!! un abrazo

Great job! you're a legend!

@OnHOWGuy

4 ай бұрын

Thanks, i appreciate that. Cheers

amazing! so helpful!

@OnHOWGuy

11 ай бұрын

Thanks, really glad it was. Cheers

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

you rock man thank you

@OnHOWGuy

4 ай бұрын

You're very welcome

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

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?

Thank you very much.

@OnHOWGuy

4 ай бұрын

You're very welcome

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!

thankyou so much

@OnHOWGuy

4 ай бұрын

You're welcome

Thank you ❤

@OnHOWGuy

4 ай бұрын

You're welcome

Bro you are the best 👍🏼👍🏼👍🏼 thanks

@OnHOWGuy

Жыл бұрын

You're very welcome, glad i could help and thank you. Cheers

😄😄😄 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

Жыл бұрын

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

Жыл бұрын

@@OnHOWGuy Thank you bro god bless you

@OnHOWGuy

Жыл бұрын

@@user-by1xi9pl5i You're welcome

THAAAAANK YOU!!

@OnHOWGuy

4 ай бұрын

You're very welcome

Thanks!

@OnHOWGuy

4 ай бұрын

You're welcome

Hey, Your content is very helpful! do you have video about how to change logo on sticky Banner when scrolling down? thank you!

Thank you very much

@OnHOWGuy

4 ай бұрын

You're very welcome

Thanks worked

@OnHOWGuy

4 ай бұрын

You're very welcome

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

9 ай бұрын

also wondering this, my main page is transparent but each other page is normal.

@OnHOWGuy

4 ай бұрын

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

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!!

Thank you sir

@OnHOWGuy

Жыл бұрын

You're welcome

Thank you

@OnHOWGuy

4 ай бұрын

You're welcome

Really helpfull!

@OnHOWGuy

Жыл бұрын

Glad it was. Cheers

nice video bro thank you so much

@OnHOWGuy

4 ай бұрын

You're very welcome. Cheers

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

4 ай бұрын

I wonder the same thing, did you find a way?

@c9vision

3 ай бұрын

want to know the same thing please

@olehbav

24 күн бұрын

Hi, I found the solution. If it's still relevant for you, let me know.

@CEEZYsWorld

21 сағат бұрын

@@olehbav what is the solution

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?

Thanks for the amazing video! Is it possible to still leave the annoucment bar black?

@OnHOWGuy

4 ай бұрын

You're very welcome, it has separate options on the theme customizer and you can set a different color for it. Cheers

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

3 ай бұрын

because it was suppose to. change the "index".

I LOVE U BRO

You're a G!

@OnHOWGuy

4 ай бұрын

Thanks

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???

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

8 ай бұрын

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.

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

8 ай бұрын

just remove this part : .shopify-section-group-header-group.announcement-bar-section{ height: 5px; }

@sdasdasdsadadad1116

6 ай бұрын

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

5 ай бұрын

i have the same doubt

@cherishunaturalbathandbody

4 ай бұрын

In the code, I changed the announcement height to 35 px so I code still see it in color.

@brittanypemberton7206

3 ай бұрын

Thank you!! This was perfect for what I was trying to do!!@@cherishunaturalbathandbody

thanks sir

@OnHOWGuy

Жыл бұрын

You're welcome

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

27 күн бұрын

I got a same problem. Who fixed it?

Merci

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😮

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.

How can this be done for several pages? I could only get it to change the main page template. Any advice is appreciated. Thanks!

Bro you got a subscriber, nice video

@OnHOWGuy

11 ай бұрын

Thanks brother, i appreciate that. Cheers

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

Жыл бұрын

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

Thank you for such a great video. It didn't work with my theme Kagami. Any suggestions?

@richardelgrichi2251

10 ай бұрын

was not able to find /body under theme liquid

@sarellablankers3374

10 ай бұрын

@@richardelgrichi2251 same problem here

Hi Anas, It does not work in minimal theme. Did you get to test it in minimal theme?

you are a beast

@OnHOWGuy

Жыл бұрын

Thanks legend, i appreciate that. Cheers

hi, thank you for the video. I was thinking if you knew how to place images inside the mega menu dropdown on the Dawn Theme? I have been trying to figure it out for almost a year now and cant find anything about it.

@OnHOWGuy

4 ай бұрын

You're very welcome, sorry for the late reply but i guess you might want to hire a developer to make a script for you, i think many people would like to see that so i will make a separate video on it soon. Cheers

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

Жыл бұрын

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

Жыл бұрын

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

Жыл бұрын

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

Жыл бұрын

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

Жыл бұрын

@@pietrog6141 Hey, Really glad you did. You're very welcome and thanks, i appreciate that. Cheers

thansk you

@OnHOWGuy

4 ай бұрын

You're welcome.

can u make it like half transparent? Like opaque?

I am curious to discover how 😀 I like before I see 🎉

@OnHOWGuy

Жыл бұрын

Then here it is for you haha. Thank you, i appreciate that. Cheers

it made my Announcement bar smaller fix?

amazing video! what if we want the header to be transparent for every page not just the homepage

Hey, this code is fantastic! But unfortunately it also made my announcement bar transparent. How can I fix it? Hope you can help.

This is great! Is there a way to make it turn a color on scroll.

@olehbav

24 күн бұрын

Hi, I found the solution. If it's still relevant for you, let me know

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

best

@OnHOWGuy

4 ай бұрын

Thanks

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

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

8 ай бұрын

did you fixed it? I have the same issue.

@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

5 ай бұрын

Thanks friend, I had the same problem but I solved it with your contribution. Thank you so much@@BensP0V

@ikergg2516

5 ай бұрын

@@BensP0V thank you so much

@BensP0V

5 ай бұрын

@@ikergg2516 it was my pleasure 👌

hello :) thanks for your amazing channel:) sadly It did not work for me, did i do something wrong?

what should i do if i want a sticky header to be showing the color as i choose the schem color when scrolling down?

Thank you 😊 It’s works, but it doesn’t work for mobile version. Can you please help.

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?

Man this one issa game changer! Anyway I can make the Title copy on the video (just a like please title) to be bold Anas?

@OnHOWGuy

Жыл бұрын

Glad you think so, If its just the title you might need to add a custom code for it. What theme are you using ? Cheers

good job Bro

@OnHOWGuy

4 ай бұрын

Thank you

Hi , thank you for your help, my header color is allways the same as my site background , I tried the code but is not transparent, can you help me please?

@nattyzach

3 ай бұрын

me too

I just did this and it made my announcements bar transparent too.

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

4 ай бұрын

I got that request and i will work on it. Cheers

@luminVerse_OldMoneyFashion

3 ай бұрын

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

24 күн бұрын

Hi, I found the solution. If it's still relevant for you, let me know.

What about an image I want to make transparent? For example logo on the image. How do I make that transparent?

How do I make the header not invisible when selecting categories on the handy version?

hi bro i facing lots of issue 1 background gif is not working on the dawn theme 2 the header it so croped

Hello! I loved the video but I have a doubt, when you make it transparent you have the color scheme of the header with white text (so that the banner is well seen) but when you scroll it is no longer visible; because it has the same color as the background of the website. How can that be changed? That is, for the banner it has a color scheme and for when it is sticky when scrolling, it has another color scheme. I remember doing it in Wordpress, but here I can't get it. Thank you :)

Hello, what’s up? I have a question how can I use this example in your video but only in my home page, and when I do scroll change the color to white! Thank you! Greetings, Jesus

@Homardlecrustace

9 ай бұрын

I was about to ask the same question @OnHOWGuy

Hi brother, this is amazing. Could you tell me how can i can the logo and main menu to appear on the mobile version of the site? for some reason they doesnt show on the mobile version. please help

@OnHOWGuy

11 ай бұрын

Hey, thanks glad you think so. The logo should be visible on the mobile actually, what theme are you using ? For the main menu it depends on each theme, check on the theme customizer to see if there is any option for the header to be displayed on the mobile. Cheers

@user-rv2tt5uc7b

11 ай бұрын

@@OnHOWGuy i am using Craft theme brother

Hey brother, thanks for the video. When I search "/body" in the code for Dawn theme, nothing appears. Is this normal after the update?

@behuman724

4 ай бұрын

yes I have face same problem

Can you explain how to get the banner to stop being transparent on scroll and on hover please ? this would mean a lot

@auricooper

8 ай бұрын

This would be very helpful thanks!

@helderwrld

7 ай бұрын

@@auricooper We need this!

@christiancastano8369

7 ай бұрын

any updates ?

@momesz27

7 ай бұрын

yes pleaseee @onhow

@NOODIDDYY

7 ай бұрын

Buddy dude I thought you working for us? The people need this