How can I adjust the position of my search bar vertically?

[guyv]

Hi All!

Please can someone assist me.

I have changed the height of the search bar in my header by changing “height” from 45px to 30px in the code below in theme.css.liquid. However after making this change the search bar is no longer vertically centered around the search icon (the search bar is slightly too high). See “Before” and “After” screenshots below.

I would like to vertically center the search bar as shown in the “Before” screenshot.

www.electricrideco.com

Thanks in advance!

.site-header__search-input {
  position: relative;
  cursor: pointer;
  opacity: 0;
  width: 45px;
  height: 30px;
  padding: ($gutter-site / 2) 0;
  font-size: em(13);
  color: color-control($color-header);
  background-color: adaptive-color($color-header, 8%);
  transition: $header-search-transition;
  z-index: $z-index-header-search-input;
  min-width: 1px;

Before:

After:

[Denishamakwana]

Please add below css code in bottom of assets/theme.scss.css file

.site-header__search {
display: flex;
align-items: center;

}
Thank you.

[guyv]

Perfect! Thanks a lot.