Why does the search bar on mobile not work properly with the Prestige theme?

Store Design
1

Hi, I’m having some issues with a couple of stores that use the prestige theme.

The search bar on mobile doesn’t work properly on products, can anyone help with this? It’s like the search bar goes behind the product images.

The website is https://raganddoll.co.uk/

Thank you

1 Like
2

@saintnoir

Can you share the screenshot of what you want?

Thanks!

3

Hi, if you go to a product page on mobile you’ll see that the search bar is broken. I have no idea why though.

1 Like
4

@saintnoir

Please share a video of your problem

5

Attached below,

1 Like
6

@saintnoir

My side working correctly. which device you have used for checking the website?

7

Hi, I’ve been using an iPhone 13 & 14. It works fine on desktop, just not mobile.

1 Like
8

@saintnoir

Sorry, I do have not iPhone Please contact another Shopify expert in the forum he can help you thanks for the replay.

9

Thank you for sharing your question with our network, @saintnoir !

I understand you are experiencing issues on the mobile version of your site, specifically using Safari? I was able to replicate your issue on my end, however, I don’t see this as an issue with default Prestige theme. Furthermore, you mentioned that this issue persists across other stores using the same theme version.

Have you made custom code edits to these websites or tested against an unedited version of the Prestige theme? There may also be installed apps injecting code that is conflicting with the search function in this particular case. I encourage you to review this related forum thread to further troubleshoot your case scenario.

If you are sure this is a theme version specific issue, then you can also connect with the theme’s developer, Maestrooo, directly for personalized assistance.

I trust that will provide further guidance,

10

I have the same issue with some stores with the Prestige theme. The search bar shows behind the product image instead of in front. Same issue on my end it only happens on some devices and happens on both chrome/ safari.

11

Hey @saintnoir , here is how I have resolved the issue with some CSS.

We essentially are making the menu ‘absolute’ instead of ‘static’, then this allows us to add a z-index to control what shows above each element. Elements with a higher z-index stack higher than others.

Note you will have to adjust the class to perfectly match your store. Especially this ID: #header-search-sections–22268856369438__header

{% comment %}
OGG Resolve the glitch with the search bar on mobile showing beneath some elements. This makes the search bar always visible.
{% endcomment %}

:where(.modal,.drawer,.popover,.header-search)::part(overlay) { background: rgb(0 0 0 / 50%)! important; /* Darkens overlay for increased UX */ } #header-search-sections--22268856369438__header { z-index: 2000! important; position: absolute! important; width: 100%! important; top: 0; /* Align top edge to the top of the page, remove this to align in normal position */ } /* Use this if you'd like the header above the modal background */ #shopify-section-sections--22268856369438__header { z-index: 5000! important; }