Merging video banner into menu/header

[ams_ElMaknoon]

Hi there, 

I have been having trouble merging my video banner with my menu so that it looks like a background behind my menu and logo. Upon scrolling down, I want a solid colour to fill the sticky header. Here is a website that does something similar: https://www.meritbeauty.com/

I have already edit my code in the theme.liquid file by following https://community.shopify.com/c/shopify-discussions/how-can-i-integrate-an-image-banner-with-my-head... advice, but it didn't work. 

Thank you

[Moeed]

Hey @ams_ElMaknoon 

Welcome to Shopify Community! Can you share your Store URL so I can have a look on it? Also, if you have password enabled then please share the password as well. Your cooperation would be greatly appreciated.

Best Regards,
Moeed

[ams_ElMaknoon]

Sure, my store is elmaknoon.com! Not password protected 🙂 

[ams_ElMaknoon]

https://elmaknoon.com/ 

the password is bifrau

[DaisyVo]

Hi @ams_ElMaknoon ,

Could you please add the video to your store first?

Once it’s uploaded, I’ll be able to review it accurately and provide the necessary support.

Look forward to your response!

Best,

Daisy

[ams_ElMaknoon]

I added the code to upload a video as my banner under "sections/video-banner.liquid." I also uploaded the video under "Content > Files > https://cdn.shopify.com/videos/c/o/v/a14d4ca75b32458f92dce48495812b99.mov" 

[ams_ElMaknoon]

Done https://elmaknoon.com/
The pass is bifrau

[DaisyVo · Accepted solution]

Hi @ams_ElMaknoon ,

You can follow the steps here:

Step 1: Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
Step 2: From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/ypQ7nly2wv27
Step 3: Copy the code below and paste it there

Here is the code for step 3:

sticky-header.header-wrapper {
    background: transparent !important;
}
.scrolled-past-header sticky-header.header-wrapper {
    background: white !important;
}
.scrolled-past-header sticky-header.header-wrapper * {
    color: black !important;
}
.scrolled-past-header sticky-header.header-wrapper nav.menu-drawer__navigation * {
    color: white !important;
}

Here is the result:

Please let me know if it works!

Best,

Daisy

[ams_ElMaknoon]

It worked! Thanks so much for your help Daisy!! 

Is there any way to make the logo transparent until scroll down? 

[Dan-From-Ryviu]

Hi @ams_ElMaknoon 

Please add video banner to your store so I can give you the code. 

[ams_ElMaknoon]

Here you go https://elmaknoon.com/
Password is bifrau