Transparent blurred colored header

[tshark]

I am on the DAWN theme and would like my header to be semi transparent and blurred to show the behind image while still having its own color. I have attached an image of what it should look like. Does anyone know how to do this?

My store is www.sharkeysmobiledetailing.com

[AwaisSaeed867]

Absolutely! Achieving a semi-transparent and blurred header on the DAWN theme while retaining its color and displaying the background image is a stylish idea. To achieve this effect, follow these steps:

1. Backup Your Theme: Before making any changes, ensure you have a backup of your theme so you can revert if needed.

2. Edit Theme’s CSS: Log in to your Shopify admin panel and navigate to “Online Store” > “Themes”. From there, select “Actions” and choose “Edit code”. You’ll want to locate your theme’s primary CSS file, typically named styles.css or theme.scss.liquid.

3. Add Custom CSS: Within the CSS file, add the following code to create the desired effect:

4. /* Add a semi-transparent background color to the header /
   .header {
   background-color: rgba(255, 255, 255, 0.8); / You can adjust the opacity (0.8) as needed /
   backdrop-filter: blur(10px); / Adds a blur effect */
   }

   /* You may need to adjust other styles for proper visibility and alignment */

5. Save Changes: Make sure to save your changes once you’ve added the code.

6. Preview and Adjust: Refresh your website and navigate to see the new design. You might need to tweak the colors, opacity, and blur values to match your vision precisely.

7. Responsive Testing: Verify that the design works well across different devices by testing its responsiveness.

8. Fine-Tuning: If necessary, you can further refine the CSS to achieve the exact look you’re aiming for.

Keep in mind that modifying the theme’s CSS requires some coding knowledge. If you’re not comfortable with coding, consider seeking help from a Shopify expert or developer.

By the way, I’ve taken a look at your store, www.sharkeysmobiledetailing.com, and it appears you offer excellent services! Best of luck with customizing your design, and feel free to ask if you have any more questions. please let me know about mobile data packages.

[tshark]

the blur part doesnt work, and the color doesnt affect the whole header

[Made4uo-Ribe]

Hi @tshark

Do you mean like this?

If it is. You can try this one.

• From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
• Find the theme that you want to edit and click on “Actions” and then “Edit code”.
• In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

sticky-header.header-wrapper.color-accent-1.gradient.header-wrapper--border-bottom {
    opacity: .7;
}
div#Banner-template--20137456599327__image_banner {
    top: -120px;
}
.banner__content.banner__content--top-center.page-width.scroll-trigger.animate--slide-in {
    align-items: end;
}

• And Save.
• I would like just to clarify, even we transparent or full opacity the header the default backround of the header is not the image banner. The default background is white or black same for the whole page. What i did the image banner that you have I move it on the header. You will notice that there is a space below the banner. That suppose the area of the image that i move in header.

I hope it help.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

[AwaisSaeed867]

I apologize for the confusion. It seems like the initial code didn’t work as expected. Let’s try a slightly different approach to achieve the desired effect. Here’s an updated set of instructions:

1. Backup Your Theme: Before making any changes, make sure to create a backup of your theme.

2. Edit Theme’s CSS: Go to your Shopify dashboard, navigate to “Online Store” > “Themes”, and select “Actions” > “Edit code”. Find your theme’s main CSS file (usually styles.css or theme.scss.liquid).

3. Add Custom CSS: Inside the CSS file, add the following code:

CSS

/* Add a semi-transparent background color to the header /
.site-header {
background-color: rgba(255, 255, 255, 0.8); / You can adjust the opacity (0.8) as needed */
position: relative;
}

/* Apply a blurred background image to the header /
.site-header::before {
content: “”;
background-image: url(‘url-to-your-background-image.jpg’); / Replace with the URL of your background image /
filter: blur(10px); / Adds a blur effect */
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1;
}

/* Adjust other styles for proper visibility and alignment */

Make sure to replace ‘url-to-your-background-image.jpg’ with the actual URL of your background image.

1. Save Changes: After adding the code, save your changes.

2. Preview and Adjust: Refresh your website to see the updated header design. You may need to adjust the blur value, positioning, and other styles to achieve the desired result.

3. Responsive Testing: Test the design on various devices to ensure it looks good across different screen sizes.

4. Fine-Tuning: If necessary, continue to fine-tune the CSS to match your exact design vision.

Please note that modifying your theme’s CSS requires a bit of coding knowledge. If you encounter difficulties, consider reaching out to a Shopify expert or developer for assistance.

if still doesn’t work, please contact me, and I will help you.

[tshark]

Yes that looks great! It seems that the code you gave me has added a blank white space below the image banner, is there a way to remove that?

Also on mobile the text from the image banner and the header clash, is there a way to keep them seperated like they are on desktop?

[tshark]

does this code look correct? it didnt do anything