Why is my search icon invisible on desktop but visible on mobile?

Store Design
,
1

Hi Everyone

My Search icon is missing on desktop but visible on mobile.

I can’t quite find the issue. Would love some help fixing this!

Thank you!

2

@josh-nsw - can you please share your website link?

3

https://nationalshrinkwrap.com/

4

Thank you

5

add this css to the very end of your style.css file and check, adjust
numbers as per the need

@media screen and (min-width:1025px){
.search-field{ padding: 0; width: 70px;}
}

6

Ty! That worked. The issue now is that it pushes it down and it then gets covered up when you start typing. :thinking:

7

Hi @josh-nsw

This is Richard from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Style.css

#predictive-search {
    top: 130px !important;
}

Hope you find my answer helpful!

Best regards,

Richard | PageFly

8

Worked. Thanks so much, Richard! :folded_hands:
Why is the top menu shifting to the right? Any idea?

9

I can see that when clicking on the search input the size of the box will be changed this will result in your header resizing to fit and the icons will move, this is part of the theme mechanics so you can contact the theme to ask for help