Search Bar missing from mobile but works on desktop.

[hwallace]

Hi!

Our website, jamesriverlaser.com, is not displaying a search bar when viewed on mobile, even though it works totally fine on desktop. Would someone please be able to help me find a solution?

Thank you 🙂

[LordSamson]

Hi Hwallace

Have you checked the mobile view to see if you have the search features enabled for mobile? If not, you should do that.

I am happy to help further if needed

[hwallace]

As far as I understand, search features are enabled for mobile. Would you be able to help point me in the right direction to ensure I've checked in the right place?

[LordSamson]

When designing your store, you would have the "Desktop, Tablet and Mobile" environment at the top-right of the customization page, click on the mobile.

At the top where you have "homepage", click on the drop down menu, you should have your search features there, click on it and apply whatever changes you want.

Alternatively, click the "theme settings" on your theme customizer environment, you should see "search" in the menus, open it and check the box.

Let me know if you need more guidance.

[hwallace]

That doesn't seem to have worked. When viewing on mobile I still don't see a search icon. Ideally it would appear next to where the shopping cart icon is. 

[LordSamson]

1. Mobile View in Theme Customizer:

Go to Online Store > Themes > Customize.

At the top of the customizer, switch to Mobile view (icon for mobile devices).

Navigate to the Header section to see if there’s an option for enabling/disabling the search bar on mobile.

Some themes have separate settings for mobile display.

2. Check the Header Settings:

In the Header section, ensure that the search bar is enabled for both desktop and mobile views.

Sometimes themes offer different configurations for each device type.

3. Theme or App Conflict:

If you're using an app for enhanced search functionality or a custom search feature, check if the app has mobile-specific settings that might affect its display.

Go to the app settings and ensure mobile functionality is turned on if available. Some apps also allow for CSS customization within their settings, so check there for any mobile-related options.

If none of these steps work, the problem could be theme-specific. Let me know if you need more guidance; we might need to dive into custom code!

[hwallace]

Hey!

Unfortunately that still hasn't done the trick. It seems we may need to dive into custom code.... 

[LordSamson]

Hi

I was busy with some projects

Have you gotten a solution to this? If not, the problem could be theme-specific and a custom code will be needed to solve this.

It’s possible that the search bar is hidden on mobile via CSS.

You can add a CSS override to make sure it displays on mobile.

In your Shopify admin, go to Online Store > Themes > Edit Code. Find the theme.css or style.css file (in the Assets folder).

Add the following code at the end:

@media (max-width: 768px) {

      .search-bar-class { /* Replace this class with your actual search bar class */

           display: block !important;

      }

}

Replace .search-bar-class with the actual class or ID of your search bar (you can find this by inspecting the element using your browser's developer tools).

[websensepro]

Hi @hwallace ,

1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. In theme.liquid, paste the below code before </head>

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

If my reply is helpful, kindly click like and mark it as an accepted solution.

If you are happy with my help, you can help me buy a COFFEE

Thanks!

[hwallace]

This didn't seem to change anything unfortunately, I'm still not seeing a search icon when on mobile.