Re: Search Icon on header

Solved

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

jennarose
Pathfinder
168 0 32

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!

Accepted Solution (1)

PageFly-Oliver
Shopify Partner
878 190 182

This is an accepted solution.

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

<style>
@media(max-width:767px){
#shopify-section-header .header__icons .header__search{display:block !important}
}
</style>



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

View solution in original post

Replies 11 (11)

Moeed
Shopify Partner
5767 1564 1858

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 </body> tag

<style>
details-modal.header__search:nth-child(1) {
    display: block !important;
}
</style>

RESULT:

Moeed_0-1694863960392.png

 

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

 

Best Regards,
Moeed

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


jennarose
Pathfinder
168 0 32

I did it but I still dont see it 😞

Moeed
Shopify Partner
5767 1564 1858

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


jennarose
Pathfinder
168 0 32

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

Moeed
Shopify Partner
5767 1564 1858

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

- Get a quick Shopify quote – Click here!

- Need a Shopify Specialist? Chat on WhatsApp

- Custom Design | Advanced Coding | Store Modifications


jennarose
Pathfinder
168 0 32

Screenshot 2023-09-16 at 7.55.29 AM.png

 

would it be any of this?

Guleria
Shopify Partner
3486 697 981

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

- Drop an email   if you are looking for quick fix or any customization
- Email: guleriathakur43@gmail.com
- Try GEMPAGES a great page builder
- If you want to help me please PAYPAL
jennarose
Pathfinder
168 0 32

thank you but that didnt work 😞

PageFly-Oliver
Shopify Partner
878 190 182

This is an accepted solution.

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

<style>
@media(max-width:767px){
#shopify-section-header .header__icons .header__search{display:block !important}
}
</style>



Hope my solution works perfectly for you!

Best regards,

Oliver | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

jennarose
Pathfinder
168 0 32

It worked.. THANK YOU SO MUCH!

PageFly-Oliver
Shopify Partner
878 190 182

you are welcome 😍

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.