Text to Left on Horizontal Search Bar

Anonymous

#105362

Hi Trevor,

You recently helped me create a horizontal search bar on my front page (https://mathsclubs.co.za/). I’d like to include some text to the left of the first drop-down option that simply says “SEARCH”.

Could you please advise.

My current code is:

/* Search bar on front page */
.home .widget-wrap form.searchandfilter[data-sf-form-id=”1135″] {
display: table;
margin: 0px auto;
background: #3366CC;
padding: 0 20px;
}

.widget-wrap form.searchandfilter[data-sf-form-id=”1135″] .sf-input-text,
.widget-wrap form.searchandfilter[data-sf-form-id=”1135″] label {
vertical-align: middle;
}

.widget-wrap form.searchandfilter[data-sf-form-id=”1135″] > ul {
padding: 0 !important;
}

.widget-wrap form.searchandfilter[data-sf-form-id=”1135″] > ul > li {
margin-right: 20px;
}

.widget-wrap form.searchandfilter[data-sf-form-id=”1135″] > ul > li:last-child {
margin-right: 0;
}

.widget-wrap .searchandfilter[data-sf-form-id=”1135″] ul li {
display: inline-block;
}

.widget-wrap .searchandfilter[data-sf-form-id=”1135″] ul li.sf-field-search,
.widget-wrap .searchandfilter[data-sf-form-id=”1135″] ul li.sf-field-category .sf-input-select {
width: 250px;
min-width: 250px !important;
}

.widget-wrap .searchandfilter[data-sf-form-id=”1135″] ul li .sf-input-text {
width: 125px;
min-width: 125px !important;
}

.widget-wrap .searchandfilter[data-sf-form-id=”1135″] input[type=”submit”] {
filter: none;
border-color: #fff;
border: ;
border-radius: 3px;
color: #fff;
background: #3366CC;
font-weight: 400;
font-size: 14px;
vertical-align: middle;
white-space: nowrap;
padding: 5px 10px;
line-height: 1.42857143;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
cursor: pointer;
}

Thanks

Andrew

Trevor

#105367

Something like this maybe:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"]:before {
  content: "Search";
  float:left;
  padding-top: 20px;
  font-size: 25px;	
}

Anonymous

#105377

Wow, thanks for the speedy response.

Two quick follow ups:

1. If you look at https://mathsclubs.co.za/, it shifts the submit button onto a new line, how do I prevent this?

2. Is there a quick way for the text to inherit the same font and style as the submit button or must I include this in the css?

Thanks again for your help.

Andrew

Trevor

#105396

This would be more like ti then:

.home .widget-wrap form.searchandfilter[data-sf-form-id="1135"] > ul:before {
  content: "SEARCH";
  float:left;
  padding-top: 28px;
  font-size: 14px;	
  color: #fff;
  margin-right: 20px;
  letter-spacing: 3px;
  font-weight: 400;
}

Trevor

#105398

This reply has been marked as private.

Anonymous

#105402

Brlliant! Thanks so much Trevor. Really appreciate your assistance. All is sorted and it looks great.

[Author]

Posts