Docs

[crawfordandjohn]

Hey Guys 🙂

Building on from this Topic >>> https://community.theme.co/forums/topic/put-a-close-or-exit-link-on-the-search-function/

I was wondering how I could change the JQuery that’s triggering when to hide the Search overlay?

Currently, when you click anywhere away from the search box in the white this hides the screen, but how could I go about changing this so that even when they clicked in the white it didn’t disappear?

That way I could attribute the class that toggles the hiding to a ‘Close’ or ‘X’ button?

Thanks 🙂

[Rupok]

Hi there,

Thanks for writing in! Kindly provide your URL and the code you are using so far.

Cheers!

[crawfordandjohn]

Hi 🙂

We haven’t done it yet, but we would like to add it to this website:

https://bespokeandoak.com

So when you press the search button in the nav bar, it displays the full-screen search as it does now, but clicking anywhere on the screen should not allow the search to display:none again, only if you click an X in the corner 🙂

Thanks!

[Lely]

Hi There,

This is how it works by default. Search close function is triggered by this class x-searchform-overlay. We can remove/unbind the function the close the search popup from this class by adding the following code on Appearance > Customize > Custom > Edit Global javascript:

jQuery(document).ready(function($) {
$('.x-searchform-overlay').unbind( "click" );

  var $searchClosebtn = $('.x-searchform-close-btn');
  $searchClosebtn.on('touchstart click', function(e) {
    if ( ! $(e.target).hasClass('search-query') ) {
      clearSearch();
    }
  });

  });

Then add this class x-searchform-close-btn to the button to bind the close function.
Further customizations from here would be getting into custom development, which is outside the scope of support we can offer. If you need more in depth changes, you may wish to consult with a developer. X is quite extensible with child themes, so there are plenty of possibilities. Thanks for understanding.

[Author]

Posts