Changing the background behind a sticky header to transparent when scrolling

Solved
karenbut40
New Member
5 0 0

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!

 

Screenshot 2021-06-30 at 21.58.30.png

0 Likes
David_Weru
Trailblazer
154 15 36

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.

0 Likes
Natztech
Shopify Partner
2124 543 1296

hello @karenbut40 

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

karenbut40
New Member
5 0 0

Hi,

thank you!

the site URL is luxeliaa.myshopify.com

do you need the password?

0 Likes
karenbut40
New Member
5 0 0

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

Screenshot 2021-07-01 at 08.50.41.pngScreenshot 2021-07-01 at 08.50.46.png

 

 

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

 

Screenshot 2021-07-01 at 08.53.08.pngScreenshot 2021-07-01 at 08.53.13.png

0 Likes

This is an 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;
}

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes
karenbut40
New Member
5 0 0

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?

 

 

0 Likes