How can I fix the misaligned search box on my Debut themed website?

Store Design
1

My website is https://insulationequipmentsupply.com/, theme is Debut.

the search box is out of line with the icon. I would like to have it either align better or preferably, hide it until clicked.

IESMO_0-1673647064868.png

As for hiding it though, the actual click space is also off a little bit. You basically have to click within this green area to activate the search function:

IESMO_1-1673647240486.png

so… my preference would be to both hide it and move it, so people aren’t “missing” it when they click on the left side of the search icon.

I inherited it from a prior marketing person, so I’m unsure if the code had been manipulated. I could not see anything obvious.

Does anyone have a suggestion?

2

Hi @IESMO

May I suggest to update code these steps:

  1. Go to Store Online-> theme → edit code
  2. Assets/theme.scss.css
  3. Add code below to bottom of file
.site-header__search .search-header {
	max-width: 3.875em;
}
.site-header__search .search-header.search--focus {
	max-width: 250px;
}
.site-header__search .search-header:not(.search--focus) .search-header__input {
	border: 0;
	font-size: 0;
}
1 Like
3

Hi @IESMO

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.scss.css.

Step 3: Paste the below code at bottom of the file → Save

input.search-header__input.search__input {

border: none !important;

margin-left: -30px !important;

}

PageFlyVictor_0-1673797643261.png

Hope that my solution works for you.

Best regards,

Victor | PageFly

4

thank you, this worked perfectly!