Search Icon on Mobile

Store Design
, , ,
1

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

website: wildbrews.co

1 Like
2

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.

3

step.png
step.png1865×854 125 KB

  • 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:

BSSTekLabs_0-1721660948502.png
BSSTekLabs_0-1721660948502.png368×575 136 KB

BSSTekLabs_1-1721660955364.png
BSSTekLabs_1-1721660955364.png373×591 111 KB

  • Please press ‘Like’ and mark it as ‘Solution’ if you find it helpful. Thank you.
4

Hi

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

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

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

Here is result:

Haptech_0-1721661058101.png
Haptech_0-1721661058101.png426×356 78.3 KB

5

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

BSSTekLabs_0-1721661351838.png
BSSTekLabs_0-1721661351838.png848×1476 219 KB

We hope this assists in resolving the issue.

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

6

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;
  }
}
7

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.

1 Like
8

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.

9

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

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

BSSTekLabs_0-1721662779237.png
BSSTekLabs_0-1721662779237.png366×792 150 KB

11

Seems like the issue is still persistent.

12

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.

13

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?