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