Search bar not appearing on mobile version of site

Shopify Discussion
1

Hi there,

I am having alot of trouble trying to make the search icon visible on the mobile version of our page. It is completely visible and functional on the desktop version.
I have tried using a few different online codes to get it fixed but none seem to be able to remedy the problem.
I am using the Oworganic 2.0 theme.
Would really appreciate any kind of help.

The website URL is Kess.co.nz

Thanks,
Shalon

2

Hello @Shalon ,

Greetings for the day! This is Mahesh for StoreWatchers team.

You need to make few changes to achieve the result.

Remove the add below code in comment. You will find this code in either header.liquid or theme.liquid

@media (max-width:991px) {
  .site-header__search-pop {
    display: none;
  }
}

From below CSS remove input[name=“q”]:not(.rps-csb-input):not(.rps_search_overlay_input) and form[action=“/search”]:not(.rps-csb-form-container):not(.rps_search_overlay_form) this selector

a[data-action="open-modal"], a[href="/search"], a[data-search], a[title="Search"], form[action="/search"]:not(.rps-csb-form-container):not(.rps_search_overlay_form), input[name="q"]:not(.rps-csb-input):not(.rps_search_overlay_input), button[type="button"].js-drawer-open-top, a[href="/search"], a.show-search-link, .header-search-toggle, li.search, a.searchIco, a.searchIcon, button.js-drawer-open-top, .header__search {
    display: none !important;
 }

Get back to me if you need any further assistance.

I can also help you fix this if you are not comfortable with code changes.

Thanks,

3

hi @Shalon

  1. Go to the online store

  2. Edit the code

  3. And remove this code

.site-header__search-pop {
display: none;

}