Shopify themes, liquid, logos, and UX
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:
Solved! Go to the solution
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.
This is an accepted solution.
Hi @martujv,
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!
Hi ,
you can try this below code:-
Thanks for the quick answer!
Where can I access that option?
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.
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
Hi @martujv ,
Can you please add the below CSS to the theme.css file?
header.header {
opacity: 0.6;
}
Thank you
It worked but it also makes the logo and icons look semi transparent. Is there a way to make only the background semi transparent?
This is an accepted solution.
Hi @martujv,
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!
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!!
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!
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
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.
Thanks!
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>
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024