Why has the search icon disappeared from my mobile site header?

Store Design
,

Topic summary

Mobile search icon in the header disappeared on www.daughterofanangel.com (mobile, next to the cart). Goal: restore the icon.

Key attempts and findings:

  • Code-insertion in theme.liquid (above ) was suggested twice; the first attempt did not show the icon. A later, similar insertion from another helper ultimately worked. The exact code content is not visible in the thread export.
  • One helper suspected conflicting CSS hiding the search icon and advised removing it or granting collaborator access to locate it.
  • A CSS fix was proposed (in base.css) to force display of .header__search on screens ≤768px, but it did not resolve the issue for the requester.
  • The requester shared a screenshot to help identify the issue.

Outcome:

  • Resolved. Adding custom code to theme.liquid from the final helper restored the mobile search icon.

Notes:

  • Code snippets and a screenshot were central to troubleshooting. Exact root cause (which CSS or script hid the icon) was suspected to be CSS-related but not conclusively identified in the thread.
Summarized with AI on January 17. AI used: gpt-5.
1

Hi!

My URL is www.daughterofanangel.com

it seems the little search icon has disappeared from my site on mobile. It is usually next to the cart icon on the header. How can I get this back?

Thank you in advance!

2

Hey @jennarose

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1694863960392.png
Moeed_0-1694863960392.png390×692 127 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

I did it but I still dont see it :disappointed_face:

4

Hey @jennarose

There’s some code in your files which is hiding the search icon. I suggest you to remove that code and then use my code again.

Best Regards,

Moeed

5

how can I find that? I never added a code to hide it.. the seach icon was there the other day.. not sure what happend

6

There’s a CSS code that is hiding the search icon, if you can’t locate that code then you can provide me collaborator access and I can do it for you.

Best Regards,

Moeed

7

Screenshot 2023-09-16 at 7.55.29 AM.png
Screenshot 2023-09-16 at 7.55.29 AM.png2120×1362 590 KB

would it be any of this?

8

Hello @jennarose ,

Follow these steps:

  1. Go to Online Store → Theme → Edit code

  2. Open your base.css file and paste the following code below:

@media screen and (max-width: 768px){
.header__icons .header__search {
    display: inline-block !important;
}
}

Thanks

9

thank you but that didnt work :disappointed_face:

10

Hi @jennarose ,

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.liquid

Step 3: Paste the below code at the bottom of the file → Save

Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

11

It worked.. THANK YOU SO MUCH!

12

you are welcome :heart_eyes: