hi, can someone help me add a search icon/bar on mobile?
i tried solutions that have been provided for other themes but they don’t work for Spotlight.
Thanks!
Topic summary
A Shopify store owner using the Spotlight theme needs help adding a search icon/bar for mobile devices. Solutions that worked for other themes don’t apply to Spotlight.
Proposed Solutions:
- Dan-From-Ryviu suggested adding CSS code to Custom CSS via Online Store > Themes > Customize > Theme settings
- BSS-TekLabs provided an alternative approach: locating the base.css file and adding specific CSS code at the end
Current Status:
The issue remains unresolved. The original poster tried both solutions without success, reporting “it didn’t work” multiple times with screenshots showing the problem persists. BSS-TekLabs identified a missing closing bracket (“}”) in the code implementation and provided follow-up guidance with marked screenshots, but the search bar still hasn’t appeared on mobile. The discussion is ongoing as they troubleshoot the CSS implementation.
1 Like
Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings
@media (max-width: 749px) {
.header--top-center>.header__search {
display: block !important
}
}
- Here is the solution for you @shoproseadore
- Please follow these steps:
- Then find the base.css file.
- Then add the following code at the end of the file and press ‘Save’ to save it.
.header__search {
display: block !important;
}
- Here is the result you will achieve:
- Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
1 Like
sorry, meant for that reply to go under the other solution provided. trying yours now!
Please add a } mark to the position I marked @shoproseadore
ok there’s not “Custom CCS” under my theme
You’re missing a “}”. Let’s add it to the location I marked in the photo above @shoproseadore
