Heading Blur

Store Design

Topic summary

Goal: make the fixed header appear as a white, semi‑transparent bar with a blur effect (matching screenshots) so underlying dark elements don’t obscure header text.

Actions taken:

  • Shared initial CSS with backdrop-filter and fixed positioning. Multiple helpers requested the store URL to tailor CSS.
  • Proposed fix added via theme.liquid (before ): fixed header, width:100%, backdrop-filter: blur(10px), background-color: rgba(255,255,255,0.9), color: black, opacity: 1.
  • Header width issue arose; resolved by adding header.header { max-width: 100% !important; }. User confirmed improvement.

Latest updates:

  • Blur effect still not applying despite adjustments. User provided the preview URL; helper requested password if applicable.
  • User reported footer layout issues after changes. Helper asked for details and suggested adjusting header position (top: -14px !important).

Status and next steps:

  • Background color and full-width behavior are addressed. Blur effect remains unresolved; footer concerns are unclear and likely need inspection on the live preview.
  • Further review of the shared store link (and password if needed) was requested to diagnose the blur and footer issues.

Notes: Multiple screenshots are central to understanding the visual differences.

Summarized with AI on December 24. AI used: gpt-5.
1

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

Screenshot 2024-07-21 at 4.39.16 PM.png
Screenshot 2024-07-21 at 4.39.16 PM.png3118×1540 845 KB

Screenshot 2024-07-21 at 4.39.28 PM.png
Screenshot 2024-07-21 at 4.39.28 PM.png3170×1574 447 KB

2

Hi @JakeDeppeler

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

Thanks.

3

@JakeDeppeler - Can you please share this page link?

4

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 .

1 Like
5

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

Screenshot 2024-07-21 at 5.13.12 PM.png
Screenshot 2024-07-21 at 5.13.12 PM.png3420×1400 714 KB

6

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.

7

Thank you very much!

1 Like
8

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

9

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.

10

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

Also the bottom footer is all messed up now

11

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

techlyser_web_0-1721505243695.png
techlyser_web_0-1721505243695.png1346×594 944 KB

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