Re: Make Header Background Blurry

martujv · ‎03-15-2024

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 · ‎03-15-2024

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

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 · ‎03-15-2024

Hi @martujv,

Go to Shopify Admin > Online Store > Themes.
Click "Actions" > "Edit code" on your theme.
Open base.css.
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!

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

Devinlabs · ‎03-15-2024

Hi ,

you can try this below code:-

here is the screenshot for that.

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 · ‎03-15-2024

Thanks for the quick answer!

Where can I access that option?

Devinlabs · ‎03-15-2024

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

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 · ‎03-15-2024

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 · ‎03-15-2024

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 · ‎03-15-2024

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 · ‎03-15-2024

Hi @martujv,

Go to Shopify Admin > Online Store > Themes.
Click "Actions" > "Edit code" on your theme.
Open base.css.
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!

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 · ‎03-15-2024

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!!

websensepro · ‎03-15-2024

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 · ‎09-26-2024

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

ThePrimeWeb · ‎03-15-2024

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.

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 · ‎03-15-2024

Thanks!

ThePrimeWeb · ‎03-15-2024

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!

Re: Make Header Background Blurry

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

☕Buy me a coffee☕

☕Buy me a coffee☕

Community Blog Articles