Issues displaying search form horizontally in Avada

Anonymous

#41322

Sure thing! Let me know if this is what you need. Rest well 🙂

Trevor

#41340

Sdaly, the Avada samples do one thing that I cannot easily do, which is to add style to the select box dropdown arrow/button. This is controlled by the user’s OS/Browser. What Avada does is to place a div element after the select box and then list this back up and over the arrow that is underneath, to ‘disguise’ it. This I cannot do, as it requires code in the plugin to do this.
So, as best as time permits, add this to the CSS I already gave you:

a.chosen-single div {
  padding-top: 7px;
}
.chosen-search input {
  border: 1px solid #dadada !important;
  color: #aaa9a9 !important;
}
.chosen-container .chosen-results li.active-result {
  display: list-item !important;
  color: #aaa9a9 !important;
}
.chosen-container .chosen-results li.active-result.highlighted {
  color: #fff !important;
  background: #39f !important;
}
.searchandfilter select.sf-input-select, a.chosen-single {
  height: 38px !important;
  background: #fff !important;
  -webkit-appearance: none;
  text-overflow: '';
  border: 1px solid #dadada !important;
  cursor: pointer;
  outline: none;
  padding: 6px 15px !important;
  text-indent: 0.01px;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
  -moz-border-radius: 0 !important;
  -o-border-radius: 0 !important;
  color: #aaa9a9 !important;
}
form.searchandfilter > ul {
  padding-left: 0;
}
form.searchandfilter > ul > li {
  margin: 0 8px;
}
.sf-input-select {
  font-size: 13px;
}

Let me know how this looks (not so good with the dropdowns).

Anonymous

#41526

Thank you so much, it worked perfectly! 😀

Trevor

#41527

Can I mark this thread as resolved and close it?

Anonymous

#41693

Yes please! Thank you 😀

[Author]

Posts