Change search input to mobile search icon (Turbo Theme OOTSB)

msoder
Excursionist
29 0 9

On mobile, the nav bar search box gets minimized to a magnifying glass which users can then click on, rather than showing the input all the time. I'd like to have this for full browser view as well. I'm comfortable editing code and know where this is in my code, so any help with what to add or remove would be great.

https://mathias-dev-test.myshopify.com/

pass: saycew

KetanKumar
Shopify Partner
20430 2114 7676

@msoder 

sorry for that issue i can see now icon it best on mobile device bcz some device doesn't more spacing in header 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
msoder
Excursionist
29 0 9

Thank again for taking the time. I actually meant that I want the mobile icon and dropdown ALSO while I'm on larger screens :). So to have the same for both. 

0 Likes
KetanKumar
Shopify Partner
20430 2114 7676

@msoder 

like this?

KetanKumar_0-1624441368484.png

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
msoder
Excursionist
29 0 9
KetanKumar
Shopify Partner
20430 2114 7676

@msoder 

great thanks for confirm please add this code

1. Go to Online Store->Theme->Edit code
2. Asset->/styles.css ->paste below code at the bottom of the file.
this code apply for after 5 - 6 second

.search__form input, .search__form input:active, .search__form input:focus {opacity: 0;visibility: hidden;}

 

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes
msoder
Excursionist
29 0 9

That works to hide the input, but when you click the search icon it just goes to search results, rather than giving you the input to type, like in mobile screen (shown in photo).

Screenshot 2021-06-23 at 14.25.51.png

KetanKumar
Shopify Partner
20430 2114 7676

@msoder 

i have check its not possible to simple css code it can be done some advance code if you need please sent pm

If helpful then please Like and Accept Solution.
Want to modify or custom changes on store Hire me.
- Feel free to contact me on bamaniyaketan.sky@gmail.com regarding any help
Shopify Partner | Skype : bamaniya.sky
PSD to Shopify | Shopify Design Changes | Shopify Custom Theme Development and Desing | Custom Modifications In to Shopify Theme | SEO & Digital Marketing
0 Likes