How can I blur the header background in Stiletto 3.1.0 theme?

[martujv]

Hello!

I would like to make the background of the header blurry in my theme (all the time, both in the computer version and in the mobile version), like in the reference photo. In this way, the content that would normally be hidden by the header could still be seen but in a blurred way.

My current theme is Stiletto 3.1.0 and my beta shop is: https://winnerofficial.com (password: y21)

Reference photo:

[Devinlabs]

Hi ,

you can try this below code:-

here is the screenshot for that.

[LuffyOnePiece]

Hi @martujv ,

Can you please add the below CSS to the theme.css file?

header.header {
    opacity: 0.6;
}

Thank you

[martujv]

Thanks for the quick answer!

Where can I access that option?

[martujv]

It worked but it also makes the logo and icons look semi transparent. Is there a way to make only the background semi transparent?

[Devinlabs]

When you edit your theme by “clicking” on customize button. you can easily find place to add custom css. here is the screenshot.

[martujv]

Yeah that’s similar to what I want but it’s not really making it blurry only semi transparent, thank you anyways!

Have a nice day

[websensepro]

Hi @martujv ,

1. Go to Shopify Admin > Online Store > Themes.
2. Click “Actions” > “Edit code” on your theme.
3. Open base.css.
4. Paste this code.

header.header{
    position: fixed;
    top: 19px;
    max-width: 90%;
    left: 50px;
    width: 100%;
    padding: 10px 15px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: black !important;
    opacity: 0.7;
}

Thanks!

[martujv]

Oh man, this is so good!! I was asking yesterday for something like this and you just nailed it!

Can’t complain at all I just want to ask 2 things:

1. I love the effect of the background when it’s standing still and not scrolling (before turning more white-ish), can I somehow make it like that all the time? I will attach 2 photos where you can see the difference.

(I would like it like this all the time, without turning white while scrolling)

(Here you can see how it turns white)

2. It’s not centered on the mobile version, is there any option to fix that?

(On the phone the header is on the right part of the screen)

Thank you again!!

[ThePrimeWeb]

Hey @martujv ,

Go to your theme’s “Edit Code” Option, then in the search bar type “theme.liquid”
Below the tag “” tag paste the following. Screenshot attached for reference.

Screenshot is for reference only, the correct code to paste is the one shown above.

[websensepro]

Hi,

Kindly attempt executing this code.

header.header{
    position: fixed;
    background-color: transparent !important;
    top: 19px;
    max-width: 90%;
    left: 50px;
    width: 100%;
    padding: 10px 15px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: black !important;
    opacity: 0.7;
}

@media only screen and (max-width: 520px) {
   position: fixed;
   background-color: transparent !important;
    top: 19px;
    max-width: 90%;
    left: 24px;
    width: 100%;
    padding: 10px 15px;
    z-index: 1000;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: black !important;
    opacity: 0.7;
}

Thanks!

[martujv]

Thanks!

[ThePrimeWeb]

Hey @martujv ,

Apply this as well, instructions are the same. Don’t remove any previous code.

[ATTAR-DE-ROYALE]

can you create a similar code but for the background to only blur when I have the sticky scroll on and I scroll up. so I want the initially header to look like image 1 when I load the page. as I scroll down the page I want the header to disappear like image 2. but when I Scroll up I want the header to go blurry and transparent like image 3.

image 1

image 2

image 3