Search Bar not responding on mobile

Solved
Highlighted
Tourist
5 0 1

Hello, I've noticed that when I try to search it sends me to the search result page on my mobile website it won't let me enter any text. I'm guessing this is due to my search text input being too small? Because it should only send me to the results page when I click on the search icon ONLY. Yet it sends me there when I click anywhere near it. Is there a way I can fix this so that it will only send me to the results page if there is text in it? Or even just being able to type something will be nice. I've also always wanted to change the width and height of my search bar but I've never been able to find out how. Even when I edit the code it's always at a fixed size. I've also seen other sites where you click the search icon and it opens up a text input field. I'd like to implement that on my mobile if possible. If anyone can help me with even just one of those I'd appreciate it. Thank you. Also I am using the minimal theme if you're wondering. 

0 Likes
Highlighted
Shopify Staff
Shopify Staff
209 16 33

Hi, @bs200653

 

Thank you for reaching out to us about that, I'd be happy to take a look for you! What is your store's URL? 

Brie | Social Care @ Shopify

 - Was my reply helpful? Click Like to let me know! 

 - Was your question answered? Mark it as an Accepted Solution
 

To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
5 0 1
Hi sorry for the delayed response.
https://interizen.com
Thanks for the help! I am just frustrated that no matter where I click the
search input, it always activated the search button
0 Likes
Highlighted

Success.

Hello @bs200653,

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss.liquid->paste bellow code in bottom of file

@media screen and (max-width: 768px) {
.supports-fontface .header-bar__search-submit {
	width: 35px !important;
}
.header-bar__search-input[type="search"] {
	padding: 5px 0;
}
}
Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
1 Like
Highlighted
Tourist
5 0 1

Thank you so much :)

0 Likes
Shopify Staff
Shopify Staff
209 16 33

Hi, @bs200653

 

Thanks for following up. Did the above solution work for you? Let me know, and if not I'd be happy to take a look for you. 

Brie | Social Care @ Shopify

 - Was my reply helpful? Click Like to let me know! 

 - Was your question answered? Mark it as an Accepted Solution
 

To learn more visit the Shopify Help Center or the Shopify Blog

0 Likes
Highlighted
Tourist
5 0 1
Hi. Thank you and yes it did 😄
1 Like