Archived topic
What is the best way to add a search box over a slider?
5 replies · Started by Mary Pearson on October 28, 2019
I am starting a new real estate website using RealtyPress plugin for MLS. They have provided me with shortcodes and widgets to show a search bar but I'm not sure how to implement it.
I would like to add it to my first section (not my header), over top of a slider.
I would like something that looks like this page http://www.kendrametcalfe.com/
What is the best way to approach it?
Thanks!
Hi there,
if you place both the slider shortcode and the search box shortcode in the same Section. Then give the Section a CSS class of relative-parent and add this CSS:
.relative-parent {
position: relative;
}Then let us take a look and i can provide some CSS to place the search box over the slider.
Ok I have done as you suggest. The search box is now below the slider.
Try this CSS which will absolutely position the element 50% down ( minus the height of the search bar ) from the top of the section and controls its width:
.bootstrap-realtypress .sc-rps-search-location-form {
position: absolute;
top: calc(50% - 104px);
max-width: 1100px;
}Thank you so much David! I would never have been able to figure that out. I think I can take it from here.
Thank you again!!!
You're welcome.
