Changing the background behind a sticky header to transparent when scrolling

[karenbut40]

Hey,

I have changed my border to transparent, however I have seen on another site when you scroll you can have just the menu a white bar. the area behind the logo stays transparent.

I have included a example. I'm using the broadcast theme,

if anyone can advise that would be great!

[David_Weru]

Hello, @karenbut40 

You can create an eventlistener for scrolling and have one style rule in force when scrolling and another when not scrolling.

Here's the onscroll event listener.

https://www.w3schools.com/jsref/event_onscroll.asp

If you'd like further assistance setting this up, please let me know.

[Kinjaldavra]

hello @karenbut40 

Please share your site URL,
I will check out the issue and provide you a solution here

[karenbut40]

Hi,

thank you!

the site URL is luxeliaa.myshopify.com

do you need the password?

[karenbut40]

hi

thanks for your reply! what would I need to use for the below effect? 

the first image is when its not scrolled and the second when you scroll down the page

my currently looks like this. I'd also like the logo bigger like the above page if you can help with that?

[LitExtension · Accepted solution]

Hello,

Please follow the steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.js__header__stuck .header__desktop__upper {
background: transparent !important;
}

[karenbut40]

hey!

Thanks so much that worked. I have another question,

When I insert my logo as a image it comes up very small. do you know how to make it bigger?