Mobile Header Icon Moving

Shopify Discussion
,
1

Hi!

I have an issue with my header search icon where it will sometimes move when I click in and out of the search. How do I fix that?

5

Nice solution
Having same issue but I have solved it with your direction

6

Wait I didn’t find a solution ?

7

Hi, @userr123
You can try by adding following code into your base.css file.

.wt-header__search__label,
.wt-header__search__button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 24px !important;   
  height: 24px !important;  
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  outline: none !important; 
  box-shadow: none !important;
}

.wt-header__search__label .svg-icon--search,
.wt-header__search__button .svg-icon--search {
  width: 100% !important;
  height: 100% !important;
  transform: none !important; 
  fill: currentColor !important; 
}


#search-shop:focus {
  border: inherit !important;
  padding: inherit !important; 
}

.wt-header__search__clear-button,
.wt-header__search__close {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: none !important;
}

Hope this helps!