A Shopify store owner using the Dawn theme wanted to improve their search bar visibility by adding a blur and darkening effect to the background (menu items and logo) when the search icon is clicked, for both desktop and mobile views.
Initial Issue:
Solution Provided:
A CSS code snippet was shared to add opacity and z-index properties to the search modal:
details[open]>.search-modal {
opacity: 0.83;
z-index: 20;
}
Outcome:
✓ Issue resolved - the user confirmed the CSS solution worked successfully
Hi,
Currently on my desktop and mobile, when I press the search icon a bar pops up over the main menu and logo in the header. I want the menu items and logo to get blur and it should be slightly more dark. so that the search bar stands out and can be visible. I need this to work both for desktop and mobile view.
sharing how the search bar looks now.
www.slidein.co.in is the website and I use dawn theme.
Hi @slidein_india can you please share your store so that I can hep you
I use the dawn theme
Hi @slidein_india ,
Try adding the following code to your CSS file. It should resolve the issue:
details[open]>.search-modal {
opacity: 0.83; z-index: 20;
}
Let me know if this works for you!
Hope it helps.
It helped. Thanks.
