Search Dropdown

Support
#1

I want to make a change to my Search Dropdown. When i press the search icon the box drops down like this:

I want it instead of droping down to apear on the left, replacing the menu. Can someone guide me on how I can make this change? Thank you for your time!

#2

Hi,

To achieve that, add a class to your search element.

Then add this in Header > CSS

.my-search {
    top: 10px;
    margin-right: 20px;
}

Hope that helps

#3

Top 0px and its perfect. Thank you for your time Sir! Very helpful. My next question is if it’s possible to make the X that closes the search window to be visible all the time not just when I type something in the search box. Thank you!

#4

Thx X in the right only apears when I type something in the search box. Is it possible to make it present in both situations, even when I am not typing anything?
As I can see the purpose of that X is to clear the text that I type. The search widow disables only if I click somewhere on the website. I want to add it the function to close the search box. Thank you for your support!

#5

Hello @Instalix,

Thanks for updating in!

To display the “X” in the search box, please use this custom css code:

.x-dropdown .x-search .x-search-btn-clear {
    visibility: visible;
    pointer-events: auto;
}

Please let us know if this works out for you.

#6

It is showing the X now. Thank you. Now is it possible to modify the X function so when I press it it will close the search bar? Right now it only clears whatever text I write in the search box.

#7

Hi There,

Please add this custom JS under Theme Options > JS:

jQuery(document).ready(function($) {
    $(document).on('click touchend', '.x-search-btn-clear', function(event) {
    	event.preventDefault();
    	$('a.my-search').toggleClass('x-interactive x-active');
    	$('.x-dropdown.my-search').toggleClass('x-active');
    });
});

Hope that helps and thank you for understanding.

#8

Thank you very much for your support. It works perfectly.

#9

You’re most welcome!

#10

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.