Search widget on header image


#1

Hi,
I want to add search on header image like the one you can see here
http://www.99acres.com/
My website URL is http://indianplayschools.com. The search box is now available below the header. How can I place it on the header image(not above - but on it).
Please suggest a free plugin or easy solution as I am not a coding geek.
Thank You


Adding Twitch to Social Widget
#2

Waiting for reply


#3

Hello there,

I would like to apologize in advance for responding slowly.

In order to achieve that objective, could you please try to do the following?

  1. Create a new row at the top of your page and give a custom class name (e.g. top-search)
  2. Insert your search widget in this row in a single column

See this screencast for the sake of visual https://cloudup.com/cQVueOPaYGK

  1. Install and activate the Header and Footer Scripts plugin. Go to Settings > Header and Footer Scripts.

In the “Scripts in header”, add the following CSS code.

<style>
.slide-text .contain .maintitle,
.slide-text .contain .subtitle{
   display: none;
}
<style>

In the “Scripts in footer”, add the following jQuery code.

<script>
(function($){
      
    "use strict";
    
    jQuery(window).load(function () {
    
      var $topSearch  = $('.top-search');
      var $sliderText = $('.slide-text .contain');
      
      $sliderText.append($topSearch);
      
    });

 
})(jQuery);
</script>
  1. Save settings

Let me know how it goes. I’ll wait to hear back from you regarding your stats.

Warmest regards,
Kharis


#4

Thank you for the detailed explanation. I will try this and get back to you.


#5

Hi Kharis,

Sorry to revive the thread. I am in a similar situation and would only like to replace the read more button in the header with a simple search box and button but I want to keep the header title and subtitles.

I have followed your advice above but the row with the widget remains below the header slider in its row. Have installed the plugin and inserted the scripts. Not sure why it is not working.

Also, that code has removed the header media image in my other pages. I just want to tweak the front page and leave the other pages alone.

Hope you can help me out. Hope to hear from you.

Cheers!


#6

Hello Mercury,

It doesn’t work due to .slide-text .contain elements aren’t longer present since we updated the main slider markup. In the “Scripts in footer”, you should use this code instead:


<script>
(function($){
      
    "use strict";
    
    jQuery(window).load(function () {
    
      var $topSearch  = $('.top-search');
 
      $('.slide-inner').append($topSearch);
      
    });

 
})(jQuery);
</script>

Regards,
Kharis


#7

Thank you Kharis,

I finally got the search bar in but it moved the header text and subtitle 100 pixels up. It moved from this:

to this:

Also, adding that code has removed my header media in the other pages. From this:

to this:

Disabling the header footer plugin restored the header media.

Hope you can help me sort this out please.

Hope to hear from you.

Cheers!


#8

Hello there,

Please share your site URL here, so I can inspect it directly. If you want it to remain private, you can contact me to kharisblank@gmail.com; mention the link to this thread.

Regards,
Kharis


#9

PM sent Kharis. Thank you


#10

Hello there,

To remove the extra gap between the slide text and the new search form, add the following CSS code into Appearance > Customize > Additional CSS in dashboard.


.slide-inner .panel-row-style {
  padding: 0 !important;
}

To fix the missing image header inner pages, try to replace the code I suggested with this one:


<script>
(function($){
      
    "use strict";

    if( $('.header-slider').length ) {
    
      jQuery(window).load(function () {
      
        var $topSearch  = $('.top-search');
   
        $('.slide-inner').append($topSearch);
        
      });

    }

 
})(jQuery);
</script>

Regards,
Kharis


#11

Thank you kharis. That fixed the header text gap.

The header media still would not appear though.

Please advise. thanks


#12

Hello there,

Please go to Appearance > Customize > Header area > Header type > Site header type. Make sure header image is active.

Regards,
Kharis


#13

HI Kharis. Its active but it wont display. Check mark on image.

Please advise. Thanks


#14

Hello there,

It found the following code CSS code which contains a bug applied:


<style>
.slide-text .contain .maintitle,
.slide-text .contain .subtitle{
   display: none;
}
<style>

Where did you put this code? Try one to replace it with either


.slide-text .contain .maintitle,
.slide-text .contain .subtitle{
   display: none;
}

or


<style>
.slide-text .contain .maintitle,
.slide-text .contain .subtitle{
   display: none;
}
</style>

Regards,
Kharis


#15

Thank you kharis. I put that in the header script as you instructed. The first code didn’t work but the 2nd one did. Thank you for your help on this.

Also, I was testing that search bar that you helped me insert insert in the header. Am having some problems with it. Initially i thought it was my search widget so i installed different widgets to test and try. I realized that if i am typing something, once the header image transitions to the next image, everything i was typing into that search bar resets back to zero when the image transitions to the next one. When it goes back to that same image where i was typing, it starts me on the keywords where i left off. As i have 5 different images, i have 5 different search bars / search instances …or something like that …sorry for my english…best I can explain.

Am hoping the search bar wont reset / pause after every image transition and just remain static. Is that possible? Please advise.

Thanks


#16

Hello there,

Try to replace the jQuery code:


(function($){
      
    "use strict";

    if( $('.header-slider').length ) {
    
      jQuery(window).load(function () {
      
        var $topSearch  = $('.top-search');
   
        $('.slide-inner').append($topSearch);
        
      });

    }

 
})(jQuery);

with this:


(function($){
      
    "use strict";

    if( $('.header-slider').length ) {
    
      jQuery(window).load(function () {
      
        var $topSearch  = $('.top-search');

        var searchForm = '<div class="slide-search">'+$topSearch+'</div>'; 

        $('.header-slider').append(searchForm);
        
      });

    }

 
})(jQuery);

Then apply the following CSS into Appearance > Customize > Additional CSS.


.slide-search {
  position: absolute;
  z-index: 9999;
  display: block;
  width: 100%;
  left: 0;
  top: 70%;
  -webkit-transform: translateY(-50%);
  -moz-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  -o-transform: translateY(-50%);
  transform: translateY(-50%);  
}

You might need to do some style adjustments.

Regards,
Kharis


#17

Hi,

I’m trying to also to change the red Click to Begin button to a Search Button.

Following most of the above steps have lead me to a Search Box that is not centralized …
Plus the original Red Button still not removed.
Plus some CSS code is showing …
Plus, the Search Button does not accept inputs …
And I wanted to be able to add words in the Search Box which disappear when anything is typed in.

Please see
https://www.taxattorneynearme.us/

Would be glad for some help.

Many Thanks,
Best Regards,
Christie


#18

Hi Kharis,

Not sure where to find that jquery code so i used the custom js & css plugin and added that to the js code and it did nothing. Could you please guide me on where i can find the file that contains that code please?

Many thanks for your patience.

Christie,

Try going to customizer/header area/header slider scroll down to URL call to action and then delete the contents of the URL and text boxes.

To center, go to the dashboard/pages/all pages/edit your front page/ (make sure you are using site origin editor) … hover over the search widget box then click edit … click design … then select center in content alignment.

I think the other issues may be a search bar config … go to the search bar plugin settings and try to tweak it from there.

Hope that helps.


#19

Hello @Mercury168,

From dashboards, navigate to Settings > Header and Footer Scripts. Could you find the code in the Scripts in footer box?

Regards,
Kharis


#20

Hi Kharis,

I followed your instructions and now the search bar is under the header and on the first row…
Thank you for your patience and still need your help.

Please advise. thanks