Search Icon on Mobile

[bagdonaviciusbm]

Is there a way of enabling the search icon or the search feature on the mobile header section?

website: wildbrews.co

[Kaushik_7]

Hello! @bagdonaviciusbm Please follow these steps to add this CSS code:

1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your CSS file. If you have a custom CSS file, open it instead.
5. If you can't find your custom CSS file, open "base.css"
6. Add the following code at the end of the file.

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

Let me know if you need further assistance, If you found my help useful, consider liking this message and marking it as the solution.

[BSS-TekLabs]

- Here is the solution for you @bagdonaviciusbm 
- Please follow these steps:

- Then find the base.css or theme.css file.
- Then add the following code at the end of the file and press 'Save' to save it.

 

details-modal.header__search.block {
    display: block !important;
}

- Here is the result you will achieve:

- Please press 'Like' and mark it as 'Solution' if you find it helpful. Thank you.

[bagdonaviciusbm]

Then the issue is that two search icons appear, one on the left side of the logo and one on the right, take a look.

 

[BSS-TekLabs]

Please replace all the added code with the following code @bagdonaviciusbm .

.desktop-localization-wrapper+ details-modal .header__icon {
display: block !important;
}

[BSS-TekLabs]

[bagdonaviciusbm]

Seems like the issue is still persistent.

[bagdonaviciusbm]

I just realized that I recently had this issue, but with pc isntead. Here is some code that a person gave me to solve it:

details-modal.header__search.block { display: none; } @media screen and (min-width: 768px){ .header--top-center>.header__search { display: none !important; } }

Maybe this helps?

[Haptech]

Hi 

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

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

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

Here is result:

[BSS-TekLabs]

Hi @bagdonaviciusbm,

Here are the steps you can follow:

1, Navigate to Online Store > Themes > Edit Code.

2, Locate and open the base.css (or theme.css, custom.css) file.

3, Paste the code snippet provided below at the bottom of the file, then save your changes.

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

Here is the result

We hope this assists in resolving the issue.

If you find our solution helpful, kindly consider Liking and Marking it as Accepted. Thank you!

[bagdonaviciusbm]

Then the issue is that two search icons appear, one on the left side of the logo and one on the right, take a look.

[VIEKIN]

Hi,

Is your means here want to show the search icon on mobile?

If that you can follow step by step bellow:

1. First you go to Admin->Store Online->Theme->Customize Code->assets/base.css

2. Second you need to add code at of bottom this file:

@media screen and (max-width: 749px) {
  details-modal.header__search.block {
     display: inline-flex !important;
  }
}

[bagdonaviciusbm]

Then the issue is that two search icons appear, one on the left side of the logo and one on the right, take a look.