Hello,
My site used Crave theme and recently I found my search bar is missing from mobile version but looks okay on desktop. My site url is https://soto-studios.com/. Please help me with that! Thank you!!
Best,
Soto
Topic summary
A Shopify store owner using the Crave theme discovered their search bar disappeared from the mobile version while remaining visible on desktop.
Initial Solution Provided:
- Add CSS code to theme.liquid file before the
</body>tag - Code forces the search wrapper to display on mobile devices (max-width: 767px)
Problem Persists:
After implementing the first solution, the search bar became visible but was not clickable or functional on mobile.
Updated Solution:
A second responder suggested adding additional CSS code through the theme customizer (Online Store > Themes > Customize > Theme settings) that includes:
- Display properties for the search wrapper
- Positioning adjustments (z-index, top, left values)
- Max-width specifications
Status: The issue remains unresolved as the user confirmed the search bar appears but cannot be interacted with. The discussion is ongoing with a more comprehensive CSS solution proposed.
Hello @sotostudios
You can add code by following these steps
-
Go to Online Store → Theme → Edit code.
-
Open your theme.liquid file
-
Paste the below code before on theme.liquid
my reply helpful? Click Like to let me know!
your question answered? Mark it as an Accepted Solution.
1 Like
Thank you for your help. I copies the code to the liquid. The search bar appears but is not able to click through and search. Can you help me with that? Thanks!
Thank you so much for your help. I copies the code as you mentioned. The search bar appears but is not able to click through and search. Can you help me with that? Thanks!
Hi @sotostudios
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 767px) {
.header-content .search-wrapper {
display: block !important;
max-width: 175px !important;
}
.header-left .search-modal__form {
position: absolute;
z-index: 9;
top: 6px;
left: 62px;
}
}
