What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

martujv
Trailblazer
172 2 38

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: 

Captura de pantalla 2024-03-15 a las 8.44.33.png

 

Accepted Solutions (2)
Devinlabs
Shopify Partner
15 1 3

This is an accepted solution.

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

shopify-community.png

Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions

View solution in original post

websensepro
Shopify Partner
1290 145 166

This is an accepted solution.

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;
}

 

 


 

websensepro_0-1710490562240.png

websensepro_1-1710490715272.png

 

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial

View solution in original post

Replies 13 (13)

Devinlabs
Shopify Partner
15 1 3

Hi ,

you can try this below code:- 

 

 

 

here is the screenshot for that. 
shopify-community.png
Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions
martujv
Trailblazer
172 2 38

Thanks for the quick answer!

Where can I access that option?

Devinlabs
Shopify Partner
15 1 3

This is an accepted solution.

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

shopify-community.png

Ravi Kumar
Shopify Partner
DevinLabs Solutions

- Need a Shopify developer? Email: devinlabsolutions@gmail.com

- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications :red_heart::red_heart:

Website: https://devinlabs.com
LinkedIn: https://www.linkedin.com/company/devinlabs-solutions
martujv
Trailblazer
172 2 38

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

LuffyOnePiece
Shopify Partner
645 93 117

Hi @martujv ,

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

header.header {
    opacity: 0.6;
}

 

Thank you



Sandeep Pangeni
Need help with your store? sandeeppangeni17@gmail.com
For quick response, Contact In WhatsApp +9779867521184
martujv
Trailblazer
172 2 38

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

websensepro
Shopify Partner
1290 145 166

This is an accepted solution.

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;
}

 

 


 

websensepro_0-1710490562240.png

websensepro_1-1710490715272.png

 

Thanks!

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
martujv
Trailblazer
172 2 38

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.

Captura de pantalla 2024-03-15 a las 9.25.05.png (I would like it like this all the time, without turning white while scrolling)

 

Captura de pantalla 2024-03-15 a las 9.25.12.png (Here you can see how it turns white)

 

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

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

 

Thank you again!!

websensepro
Shopify Partner
1290 145 166

 

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!

 

Need a Shopify developer?
Hire us at WebSensePro
For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
Subscribe to our youtube channel or buy us a Cofee here

Free Shopify Beginner Tutorial
ATTAR-DE-ROYALE
Tourist
7 0 0

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

Screenshot 2024-09-26 143932.png

 

image 2

Screenshot 2024-09-26 144016.png

 

image 3

Screenshot 2024-09-26 144213.png

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @martujv,

 

Go to your theme's "Edit Code" Option, then in the search bar type "theme.liquid"
Below the tag "<head>" tag paste the following. Screenshot attached for reference.

<style>
header.header {
    background-color: transparent !important;
    opacity: 1;
}
</style>

 

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

ThePrimeWeb_0-1710493010819.png

 

Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!
martujv
Trailblazer
172 2 38

Thanks!

ThePrimeWeb
Shopify Partner
2139 616 515

Hey @martujv,

 

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

<style>
header.header {
    left: 50% !important;
    transform: translateX(-50%) !important;
}
</style>
Was I helpful?

Buy me a coffee

🙂

Need help with your store? contact@theprimeweb.com or check out the website
Check out our interview with Shopify!