Heading Blur

[JakeDeppeler]

Looking for some help, i’m try to get my header to look like the first photo where the back ground is more white and the black colours don’t cover the black text

header.header {
position: fixed;
top: 1px;
max-width: 100%;
left: 0px;
width: 1000%;
padding: 1px 1px;
z-index: 900;
backdrop-filter: blur(90px);
-webkit-backdrop-filter: blur(60px);
color: white !important;
opacity: 100;
}

[Entesta]

Hi @JakeDeppeler

Please share your store URL so that we can review and share the CSS accordingly.

Thanks.

[suyash1]

@JakeDeppeler - Can you please share this page link?

[niraj_patel]

Hello @JakeDeppeler
Try this

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

header.header { position: fixed; top: 1px; left: 0; width: 100%; padding: 10px; /* Adjust padding as needed */ z-index: 900; backdrop-filter: blur(10px); /* Adjust blur to your preference */ -webkit-backdrop-filter: blur(10px); background-color: rgba(255, 255, 255, 0.9); color: black !important; opacity: 1; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

otherwise share you store URL .

[JakeDeppeler]

Just wonder how to get it the full width as it stuck like this now

[niraj_patel]

Add this CSS

header.header{ max-width:100% !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.

[JakeDeppeler]

Thank you very much!

[JakeDeppeler]

Hey again, sorry the back ground is the right but I can’t get the blur to work and adjusting it isn’t working

[niraj_patel]

would you like to share your store URL and password if any please.
so i can check and provide you possible solution for your question.

[JakeDeppeler]

https://b400b2-75.myshopify.com/?_ab=0&_fd=0&_sc=1

Also the bottom footer is all messed up now

[niraj_patel]

what happened with footer?

Add this css

You can add code by following these steps

1. Go to Online Store → Theme → Edit code.

2. Open your theme.liquid file

3. Paste the below code before on theme.liquid

header.header { top: -14px !important; }

Was my reply helpful? Click Like to let me know!
Was your question answered? Mark it as an Accepted Solution.