Search Bar not responding on mobile

Solved
bs200653
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
Brie
Shopify Staff
Shopify Staff
568 48 99

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
bs200653
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

This is an accepted solution.

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;
}
}
If helpful then please Like and Accept Solution. Free Website Review and advice for sale from Hire us
Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Shopify SEO | Digital Marketing | Site Speed Optimization | Performance Site Audit
For Quick Chat Whats app | Email: pallavi@oscprofessionals.com | Skype : oscprofessionals-87
bs200653
Tourist
5 0 1

Thank you so much :)

0 Likes
Brie
Shopify Staff
Shopify Staff
568 48 99

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
bs200653
Tourist
5 0 1
Hi. Thank you and yes it did 😄
LetsGetDigital
Shopify Partner
11 0 23

This was the perfect fix for me on the Out of The Sandbox theme Parallax 4. 

Thanks .

B

0 Likes
PascalR
Excursionist
23 0 5

Hello, i have a similar problem with my website  https://www.miami-hair-shop.com/   theme turbo portland

When i made a request on the search button only on mobile phone, nothing happens.

Thanks

Pascal

 

0 Likes