Have the filter form going across horizontally on the blog index page vs widget

Anonymous

#203909

Hi
I wanted to have the search form go across the top of the blog index page horizontally vs vertically in a widget sidebar.

This is how i have it but i wanted to have it be in a horizontal ban across the top of the main blog page.

https://www.dropbox.com/s/9vjvn19ukqo7pop/Screenshot%202019-03-05%2000.38.02.png?dl=0
https://neosystems.com/resources/

Can you let me know how to do this?

Trevor

#203930

You always want it to be horizontal?

If so, the form is in a widget in the sidebar, so you need to find a way to place it at the top of your header in your theme. And then use CSS such as that here:

https://searchandfilter.com/documentation/getting-started/display-search-form/#making-your-search-form-horizontal

Anonymous

#204162

HI trevor,
I added the code but it makes the search box float higher then the other 2 fields. Ideally i would want all three (2 dropdowns and search box) to align at the bottom
best
designbabe

Trevor

#204179

I could probably give you some CSS to correct that, but I would need to be able to see it live so I can use the browser developer tools inspector to do this. The link you gave still shows a vertical form?

Anonymous

#204519

Hi trevor,
I don’t have staging area on that site and I don’t want mess up and have the live blog not aligned. So i copied on to this site ‘s staging which is the exact same theme, can you give me the css by looking at this page
http://concretesensor.staging.wpengine.com/learn/
thanks
designbabe

Trevor

#204608

You could try this custom CSS:

.searchandfilter .sf-field-search input {
  height: 2.65em;
}
.searchandfilter .sf-field-search label:before {
  content: "";
  padding: 1em;
  display: block;
}

Anonymous

#204687

thanks that worked!

[Author]

Posts