Best way to achieve SEARCH FIELD over SLIDER

[brocknessmonster]

I have a working prototype where I have a SEARCH FIELD over a SLIDER. I am not super happy with how this is working. It’s ok but a little janky.

I’m wondering if there’s another way to achieve this effect with better results. Roughly speaking I created a standard slider then another row below it with the SEARCH FIELD then used a negative top margin value to pull that row up so that the SEARCH FIELD is on top of the SLIDER.

Thx in advance for suggestions and constructive criticisms.

B

[prakash_s]

Hello @IT_MiamiCountyOhio_gov,

Thanks for writing to us.

I would suggest you please add the slider and then you need to add the DIV element there in the same column, inside the DIV element you need to insert the Search element. Please have a look at the given screenshot.

You need to set the DIV element position as absolute and set the top as 50% to make the search box on the top of the slider.

Hope it helps
Thanks

[prakash_s]

Hello @IT_MiamiCountyOhio_gov,

I checked your given site URL I would suggest you go to the Row—>Customize—>Element CSS. Now add this custom CSS code.

$el{position:absolute; top:10em; width;100%;}

The purpose of providing custom CSS is to show you how to add CSS code to your site. Writing custom CSS is outside the scope of our theme support. If you need more customization, you need to learn CSS and learn how to use the browser’s element inspector or you subscribe to One where customization questions are answered.

Hope it helps.
Thanks

[brocknessmonster]

I was doing something similar except you are pushing the row down using TOP: 10 em; and I was pulling the row up using a negative top: 8em or something like that .

thanks for your suggestion.

[prakash_s]

You are most welcome @IT_MiamiCountyOhio_gov