Solved

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

martujv
Pathfinder
99 2 26

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
1047 146 152

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

View solution in original post

Replies 12 (12)

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
Pathfinder
99 2 26

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
Pathfinder
99 2 26

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
597 86 102

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
Pathfinder
99 2 26

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
1047 146 152

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
martujv
Pathfinder
99 2 26

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
1047 146 152

 

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

ThePrimeWeb
Shopify Partner
2138 614 487

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
Pathfinder
99 2 26

Thanks!

ThePrimeWeb
Shopify Partner
2138 614 487

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!