[Resolved] What is the best way to add a search box over a slider?

Home Forums Support What is the best way to add a search box over a slider?

Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1047367
    Mary Pearson

    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!

    #1047564
    David
    Staff
    Customer Support

    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.

    #1047927
    Mary Pearson

    Ok I have done as you suggest. The search box is now below the slider.

    #1047944
    David
    Staff
    Customer Support

    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;
    }
    #1047949
    Mary Pearson

    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!!!

    #1047960
    David
    Staff
    Customer Support
Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.