Solved

How can I make my website header stay transparent when scrolling?

JoeyRoo
Excursionist
45 0 5

Hi,

 

When I scroll down through the slideshow on my page, a Black bar appears in the Header under the Logo and Menu. Is there a way to change this so the Header stays transparent and the Black bar only appears when the mouse rolls over it?

 

Site is theothelabel.com

 

Thanks in advance!

Accepted Solutions (2)

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @JoeyRoo 👋

Inside Shopify Admin, you can go to Edit theme code, open file app.css and add this code at the bottom

#header::before {
    background: transparent;
}

#header:hover::before {
    background: var(--color-header-bg, #fff);
}

The result

Screenshot 2023-10-11 at 10.11.52.png

On hover

Screenshot 2023-10-11 at 10.12.11.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

You can add this code right before </body> in the file theme.liquid 

<script>
let whiteSection = document.querySelector('#shopify-section-template--21084839051552__1662389920b1295ea2')
let header = document.querySelector('#header')

if (whiteSection) {
    window.addEventListener('scroll', function() {
        if (whiteSection.getBoundingClientRect().top < 150) {
            header.style.background = 'var(--color-header-bg, #fff)'
        } else {
            header.style.background = ''
        }
    })
}
</script>
Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com

View solution in original post

Replies 34 (34)

Dan-From-Ryviu
Shopify Partner
7514 1450 1447

Hi, you can try to add this code to your theme.liquid before </head> tag and check

 

<style>
#header.is-sticky:before { background: transparent; }
</style>

 

- Helpful? Like or Accept solution, - Coffee Tips or Paypal Tips
- Ryviu - Product Reviews app, collect product reviews, import reviews from AliExpress, Amazon, Etsy, Shopee and Walmart and CSV.
- Lookfy app: Create Image Lookbook, Photo Gallery with product hotspots
- Enjoy 1 month of Shopify for $1. Sign up now

JoeyRoo
Excursionist
45 0 5

This works in keeping the header transparent, but is there a way to make the black background in the header appear when I hover the mouse over? It only does this on the first slide, but not on any of the other slides. 

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

Hello @JoeyRoo 👋

Inside Shopify Admin, you can go to Edit theme code, open file app.css and add this code at the bottom

#header::before {
    background: transparent;
}

#header:hover::before {
    background: var(--color-header-bg, #fff);
}

The result

Screenshot 2023-10-11 at 10.11.52.png

On hover

Screenshot 2023-10-11 at 10.12.11.png

Hope that helps!

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
JoeyRoo
Excursionist
45 0 5

This works perfectly thank you. I have one more request, which may be a little more complex. If you scroll towards the bottom of the page the image is white so the Logo and Menu can not be seen. Is there a way to make the Black background in the header automatically come up for this part of the page only? So it will remain transparent for the other pages, but will automatically show on this page so the Logo and Menu can be seen clearly.

ZenoPageBuilder
Shopify Partner
1052 203 217

This is an accepted solution.

You can add this code right before </body> in the file theme.liquid 

<script>
let whiteSection = document.querySelector('#shopify-section-template--21084839051552__1662389920b1295ea2')
let header = document.querySelector('#header')

if (whiteSection) {
    window.addEventListener('scroll', function() {
        if (whiteSection.getBoundingClientRect().top < 150) {
            header.style.background = 'var(--color-header-bg, #fff)'
        } else {
            header.style.background = ''
        }
    })
}
</script>
Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
JoeyRoo
Excursionist
45 0 5

You're a lifesaver! Appreciate the help

ZenoPageBuilder
Shopify Partner
1052 203 217

You are very welcome 🙂

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder,

Can you show me how can i do on my website?

https://diversusoficialsite.myshopify.com/

pass: diversusoficial

ZenoPageBuilder
Shopify Partner
1052 203 217

Hello @HELDERWRLD 👋

Do you want to make this menu transparent?

Screenshot 2023-10-28 at 08.53.08.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Yes, but i want it to be white when i roll down and when i hover the mouse

ZenoPageBuilder
Shopify Partner
1052 203 217

Your theme menu can only be transparent when scroll down

Screenshot 2023-10-29 at 09.06.42.png

And white by default

Screenshot 2023-10-29 at 09.07.28.png

Do you want to do this?

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

It's not possible to make it transparent by default?

ZenoPageBuilder
Shopify Partner
1052 203 217

It is possible to make it always semi-transparent like this

Screenshot 2023-10-30 at 16.23.56.png

Do you want this settings?

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder 

Already found a way to make it transparent. Can you help me to make it default when i scroll back up

 

And also help me make my hamburger menu cover the header on mobile and desktop? i don't want my header to be semi transparent when i open my menuScreenshot 2023-10-30 at 10.14.21 AM.png

ZenoPageBuilder
Shopify Partner
1052 203 217

You can add this code to make it to white when scrolling upward (still transparent when scrolling down)

.shopify-section-header-sticky:not(.shopify-section-header-hidden) .header-wrapper {
    background: var(--gradient-background) !important;
}

I was checking for the menu issue, however, I couldn't access your store, even though I tested on a new device and still had the same error for the first visit. Not sure if you are using an app to block traffic, or if this was just a temporary issue.

Screenshot 2023-10-31 at 11.12.30.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder 

It worked, do you know if it's possible to make the header appear smoother when i scroll upwards? ex: https://representclo.com/

I don't know what happened, but you try again please? I don't think i have an app that blocks it. I also noticed my admin portal was way too slow yesterday, i couldn't even send a message for the shopify team for help

ZenoPageBuilder
Shopify Partner
1052 203 217

I think we can only find an option in the theme to change how the header appears. I can not add some CSS code to adjust it.

 

About the issue, I also got reported from the clients about slow responsiveness in Admin, sometimes it happened that the clients couldn't open the app. So maybe it is just a temporary issue and hopefully will be resolved soon.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello, i think it's back working fine, can you check again please to help me with the hamburger menu?

ZenoPageBuilder
Shopify Partner
1052 203 217

You can add this code

.header__icon {
    z-index: 9999;
}

#menu-drawer {
    transform: translateY(-60px);
    padding-top: 32px;
}

The result

Screenshot 2023-11-02 at 15.45.30.png

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Where should i add? Does the code do the trick for mobile too?

HELDERWRLD
Explorer
105 0 6

Tried to put on "base.css" and this happened.

Screenshot 2023-11-02 at 2.00.32 PM.png

ZenoPageBuilder
Shopify Partner
1052 203 217

I think we need to ad !important

.header__icon {
    z-index: 9999 !important;
}

#menu-drawer {
    transform: translateY(-60px) !important;
    padding-top: 32px !important;
}

If it does not work, please keep the code there so I can check.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello,

It still not working. I will leave so you can see.

Maybe i am placing on the wrong place. Is is in "base.css"?

HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder 
Can you still help me?

ZenoPageBuilder
Shopify Partner
1052 203 217

Sorry I missed the noti. Then you can add one more CSS rule

 

.header__icon::before {
    left: 400px !important;
}
Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Thank you, it worked. But there a few bugs, i will show you. How can i fix?Screenshot 2023-11-05 at 2.19.54 PM.pngIMG_8300.jpg

ZenoPageBuilder
Shopify Partner
1052 203 217

I just requested access to your store. Please check and accept it so I can modify your code to fix it.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder 
Done.

ZenoPageBuilder
Shopify Partner
1052 203 217

I just fixed it. Please check.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

There are still a few errors.
Also on desktop the white header appears when i open the menuUntitled_Artwork.jpg

ZenoPageBuilder
Shopify Partner
1052 203 217

I just changed it. Please check again.

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder 
You also changed the design and you´ve streched the menu further to the right, but i don't want like that. 

I want how it was, but with the possibility to click also on the red side (the image reference) to close the menu. And also remove the icons and make the page background transparent so people can focus on the menu they opened

ZenoPageBuilder
Shopify Partner
1052 203 217

This is the best we could do. Please check it.

 

DIVERSUS OFICIAL.jpeg

Zeno Page Builder - Build responsive & SEO-optimized Landing pages, Blog posts, Product pages and more...
Learn more at zenobuilder.com
HELDERWRLD
Explorer
105 0 6

Hello @ZenoPageBuilder it worked. Thank you!

Could you also help on something else, please? 

Add Badge/Product labels To Images On Collection Page/Featured Products - Dawn Theme

And also i want to bring the icons of my header more closely on mobile and for the logo go to the center, like this: 
IMG_8373.jpg


And would like to know if you have a code to help me increase the size of my main page banner, because it doesn't cover full screen