How can I adjust the search box size in Venture Theme?

Store Design
1

Hi All,

In Venture theme, I have adjusted the size of my header and now the bottom of the search box is cut off (see screenshot below).

I would like to find out if there is a way to change the size of the search box so that it fits?

www.electricrideco.com

Thanks in advance!

Screen Shot 2022-05-30 at 1.26.18 PM.png
Screen Shot 2022-05-30 at 1.26.18 PM.png1280×446 295 KB

2

@guyv

@media screen and (min-width: 768px){
.site-header__search-cart-wrapper {
    margin-bottom: -16px !Important;
}
}

Add this code in the bottom of theme.scss or theme.css file.

3

@Mr_RaviRaj

Thanks for your reply! I would rather make the search box smaller instead of changing the margin. Is this possible?

4

I have figured out how to change the height of the search bar in theme.css.liquid by changing “height” in the CSS below. However after making this change the search bar is no longer centered around the search icon (the search bar is slightly too high). See screenshot below.

Can someone assist with fixing the position of the search bar so it is centered around the search icon?

Thanks!

.site-header__search-input {
  position: relative;
  cursor: pointer;
  opacity: 0;
  width: 45px;
  height: 45px;
  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;

Screen Shot 2022-05-30 at 4.27.35 PM.png
Screen Shot 2022-05-30 at 4.27.35 PM.png1280×278 115 KB

5

Can anyone assist with this please?

The search bar position just needs to be lowered slightly so that the search icon is vertically aligned in the middle of the bar.

Note that I have not made the change in my live theme so it will not show on my website.