Search icon invisible on mobile

Technical Q&A
, ,
1

search icon is invisible but the search button still works, uses the fabric theme.
I have made some edits to the code, and I have found the mobile search icon shows up on an unedited fabric theme template.

2

image
image359Ă—857 50.5 KB

3

You’ve added padding on button:

    .button {
      padding: 10px 25px; /* <--- THIS! */
      font-size: 16px;
      cursor: pointer;

      /* Customization options */
      color: #ffffff;               /* Text color */
      background-color: #00000000;  /* Button background color (transparent) */
      border: 2px solid #00000000;    /* Border size and color */
      border-radius: 6px;           /* Rounded corners */
      transition: background-color 0.3s ease, border-color 0.3s ease;
    }

Padding leaves no space for icon to show if total element width is also set.
Add this to fix:

button.header-actions__action {
  padding: 0;
}
4

Hello @user1201 ,

I hope you are well!

Can you please share the store URL? It will be helpful for us to provide you the css which will show the search icon.

5

Hi @user1201,

Please send the website link, I will check it for you

6

wow that was so simple. I put the code into my header’s custom css and it worked. god bless people like you :saluting_face:

7

Hi @user1201,

It’s my pleasure :blush: