How can I make the header background on the Refresh Theme (V12.0) appear blurry?
I've tried the following, but this code alters the position of the contents of the page and makes other parts such as the product title move upward, obstructing the view of the title.
.shopify-section-group-header-group .announcement-bar-section {
position: relative;
z-index: 20;
}
.header-wrapper {
position: absolute;
width: 100%;
z-index: 10;
background: transparent;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border-bottom: none;
}
.header-wrapper .header {
margin-top: 20px;
}
.mega-menucontent,
.disclosurelist-wrapper {
background: transparent !important;
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: none;
}
.search-modal__content {
background: transparent;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
