Make Header Semi-Transparent When Scrolling Up

Store Design
,
1

Hey,

I was wondering If anyone could provide some code to make my header semi-transparent on scroll up. Almost like the images behind them are blurry on scroll up.

Example Website: https://www.wrldinvsn.com/

MY WEBSITE: Wholesome Boy

What I have:

bbb5a3b14820cc44951fe974ad0fbc0c.png
bbb5a3b14820cc44951fe974ad0fbc0c.png1899×496 62 KB

What I want:

dc02149b1d575bc42568cafddbf071ff.jpg
dc02149b1d575bc42568cafddbf071ff.jpg1894×501 120 KB

Thank you!

2

Hey @WholesomeBoy

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.
1 Like
3

Hi,

I want it to turn semi-transparent when scrolling up only. Your code also made the logo and icons transparent. I do not want that.

I also want the blurry effect like the example in my original post.

Thank you though!

4

Hi @WholesomeBoy

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:
.header-wrapper {background: #ffffffd9 !important;}

Regards,

San

2 Likes
5

Thank you so much sir!

I was wondering if it were possible to make images slightly blurry behind the semi-transparent header too? Also, do you have code to make the header a fixed width?

I appreciate you!

6

worked for me thank you very much, I use studio theme

1 Like