Text to Left on Horizontal Search Bar - Search & Filter Support

This topic has 5 replies, 2 voices, and was last updated 9 years, 5 months ago by Anonymous.

Viewing 6 posts – 1 through 6 (of 6 total)

Anonymous
(Private) April 28, 2017 at 9:42 am #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
(Private) April 28, 2017 at 9:54 am #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
(Private) April 28, 2017 at 10:05 am #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
(Private) April 28, 2017 at 11:52 am #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
(Private) April 28, 2017 at 11:53 am #105398

This reply has been marked as private.

Anonymous
(Private) April 28, 2017 at 12:02 pm #105402

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

Posts

Viewing 6 posts – 1 through 6 (of 6 total)