"Search Box" and "Search Button" on main slider?

Hello :slight_smile:

How can I put a “Search Box” and “Search Button” on main slider?

Thanks to Kharis’s kindness I have code for merging Search Box with Search Button and its perfect. Search Box - how to change font and frame color

Just I woudl like to place it on Slider and if it’s possible to set horizontal and vertical alignment.

Thank you :slight_smile:

Hello there,

Firstly you’ll need to add this PHP code to your active Sydney child theme. Or you an use a functionality plugin like Code Snippets.

    function sydney_child_top_search_form() {
      echo '<div class="top-search">'.get_search_form(false).'</div>';
    }
    add_action('sydney_inside_hero', 'sydney_child_top_search_form');

Then apply the below jQuery code with the TC Custom JavaScript plugin.

    (function($){

      if( $('.header-slider').length ) {

        jQuery(window).load(function () {

          var topSearch  = $('.top-search');

          topSearch.css('display', 'block');
          $('.header-slider').append(topSearch);

        });

      }

    })(jQuery); 

Afterwards, add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .top-search {
      display: none;
      position: absolute;
      z-index: 9999;
      left: 50%;
      top: 80%;
      -webkit-transform: translateY(-50%);
      -moz-transform: translateY(-50%);
      -ms-transform: translateY(-50%);
      -o-transform: translateY(-50%);
      transform: translateY(-50%);
      -webkit-transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      transform: translateX(-50%);
      padding: 0 !important;
    }

Regards,
Kharis