Styling of Search Box

Hi,

I added a search box in the main menu of my page. But I have 2 problems with it.

When you hover over the search icon the “Search field” is displayed and you can enter a search term and the search results displayed via AJAX. But then the search box suddenly disappears and I can only see the search result list.

And when you scroll down to show more search results, the complete box move to the left corner and you can´t see the results. I have added a screenshot of the behaviour.

I hope this is just a little CSS to fix the problem? Can you please help me with this?

Michael

Hi @michaelxxx,

Unfortunately, it is not a little bit of CSS thing and related to the Javascript code that is used. This is not part of our theme and is a customization request and unfortunately we can not be of help.

You will need to contact the script developer and ask them for help.

Thank you for your understanding.

Ok, I understand.

But maybe you can help me with one thing. At the moment the search box appears as soon as you go over the magnifying glass. Is it possible to set the main menu that the search box appears only after a click?

Hey @michaelxxx,

It seems like you’re using a custom Navbar Search feature because by default when the Navbar Search is enabled via Theme Options it works on click. I’d recommend you to remove your current custom Navbar Searching feature and use the default one by navigating to Theme Options > Header > Search > Navbar Search and activate it (see screenshot)

image

Hope this helps!

Hi,

I can turn on the Theme Options > Header > Search > Navbar Search option. But then I activate the standard wordpress search. But I use the plugin “Ajax Search Pro - Live” to get better search results.

So how can I disabe the standard search and enable my Ajax Search by clicking on the magnifying glass?

Hello @michaelxxx,

Please be advised that “Ajax Search Pro - Live” is a 3rd party plugin. We are not familiar with this plugin. It is best that you contact the creators of this plugin for further assistance or check out their documentation here:

Thank you for your understanding.

Hi,

thank you for the links.

I tried to replace the default theme search bar. This method is supported by 99% of the themes out there - but I think it´s not supported by X :frowning:

When I click on the search icon, the default wordpress search is coming up.

They also wrote:

If the default search bar is not replaced after choosing one of the options, you will have to replace it manually in the theme code. To place the shortcode to the theme you need to find the proper location first. If you are not familiar with theme structures, I suggest you consult a developer before editing anything.

Can you tell me which file in my x-child I have to edit for this?

I found this posting here: Replace default search

But no matter what changes I make in the searchform.php, there are no changes on the page. I tried both: to make changes in searchform.php under my x-child folder wp-content/themes/x-child and also I tried (just to check) to edit the original searchform.php under wp-content/themes/x - nothing happend. I can delte the complete content of the searchform.php under X - the standard search is still there. Is it the wrong template file?

Michael

Hi @michaelxxx,

Unfortunately, the search on the header is different from search form that actually on search pages, which are usually customizable with searchform.php

The one on the header is a theme-specific search feature which has no relation to searchform.php, the one you’re referring that supported by 99% of the themes out there is searchform.php. And it’s the form on search pages, not on header bar which again, is usually theme-specific.

As for reference of which is search page and search form, then please check https://codex.wordpress.org/Creating_a_Search_Page along with searchform.php https://developer.wordpress.org/reference/functions/get_search_form/ . Is completely different from the one on header.

You can only turn off the header’s search bar, and integrate your own search to the header. For example, you can check this https://www.wpbeginner.com/plugins/how-to-add-a-search-bar-to-wordpress-menu-step-by-step/. The header search of the theme just an additional feature but it’s not a requirement, users could always add their own search features.

Once again. the ones you referred to those other threads are different, they are search form within the search page and have no relation to header search.

Thanks!

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