Search Box Not Working Properly / Icon Stack

Hi!

My search bar was working fine, but now it is not. The search icon itself appears in the header, but whenever I click on it the full-screen pop up which usually displays the search option and search box do not appear. I have included a screenshot. It on seems to be visible when I’m in the customize tab but appears at the bottom now. It’s weird.

Hi,

I can see you have modified wp-header.php May I know what are you trying to achieve.

There a lot of syntax error on that file. Can you try deleting that file and see if your search will work.

Make sure to back it up first before deleting.

Thanks

Hi. Paul!

I do not wish to delete the header.php file. Why would I do that? It isn’t necessary. The information that’s in the header is for SEO mainly rather than site customization and will not cause the search to stop working. The codes will probably appear as errors here but are not when plugged into webmaster tools. etc. Is there any other help you can offer so I can get to the bottom of it? Thanks in advance.

Hey There,

You have inserted <script> tags in your header and footer. Please be advised that script tags works with Javascript. If there are JS errors on the page, all the JS scripts will stop working. This maybe the reason why your search box is no longer working. We have to remove or resolve all the JS errors on the page in order for the search box to work again. The Search click events is driven by javascript so the only option is to resolve all the JS errors.

Hope this explains it briefly.

Can please assist me with identifying which items are causing the js errors that would in fact, cause the search box to stop working?

Additionally, I’m also curious as to why, by default, if a sidebar is added to a page within the icon stack why the search box moves to a new line on the menu adding additional white space rather than staying in line with the page names like it does on pages where no sidebar exists. How can this be fixed? I have included a screenshot.

Hi there,

Unfortunately, the login credentials are not correct and we could not access your website and I am not sure the website URL as you did not send us the correct URL.

We will not be able to help you to identify the problem as it is something that is caused by your customization. You need to double check that yourself. The thing that we can show is our browser console log which is full of the errors like this:

You need to make sure that the customization that you have done is correct.

The reason that the search icon goes to the next line is that there is not enough space for the menu items that you have when there is the sidebar.

You need to make sure that the padding between items is smaller. A CSS code like this may help:

.x-navbar .desktop .x-nav>li>a>span {
padding: .875em 1.25em;
}

Change 1.25 em to whatever size that will be better for the sidebar case.

Finally, I see that you use the Autoptimize plugin which minifies the assets of the theme and the builders which will cause problems as the assets (JS and CSS files) of the theme are already minified and using the plugin will have the double minification effect which will ruin things.

You either need to avoid using the plugin or check the assets of the theme and exclude them from minification process of the plugin.

Kindly open up new threads for additional questions as it will help us to focus on each issue and give you a better support which you deserve. Having a long threads makes the maintaining job harder and also it will be harder for the other customers to find the correct information if they have similar issues. You are always welcomed to reply to this thread to follow up the same question.

Thank you.

Hi!

As for the search box appearing on the second line, this seems to happen on pages where a sidebar exists. What is the code that is specific to pages with sidebars only? I do not wish to change the space for menu items on any other page types. My website is Keiani Enterprises

I have done this and the search box is still not working.

Hi There,

There’s a class added on the the body when sidebar is active. We can use it. See this: https://screencast-o-matic.com/watch/cFVUccoUw2
x-sidebar-content-active
We can include that class on the CSS like this:

.x-sidebar-content-active .x-navbar .desktop .x-nav>li>a>span {
padding: .875em 1.25em;
}

Regarding the search box, there are still JS errors: https://screencast-o-matic.com/watch/cFVUcioUwz
You have an open script tag followed by html codes that cause syntax error.

That might be coming from your customization since it is not existing from Global JS. Fixed that error and try again. Let us know how this goes.

I’ll check it out now and see how it goes.

Please let us know how it goes.

Cheers!

Hi, Lely!

I removed that particular code temporarily and cleared my cache, but the search box is still not working. The code is actually in the footer so why would it affect the search box? The new sidebar code isn’t working either… no change. I’m confused. I even deactivated autoptimize plugin, cleared caches, and no change. Also, as far as I know, a blog posting schema would not cause the search box to stop working. I can’t seem to figure this out.:confused:

Hi There,

Search function run using javascript/jquery. For this and other functionalities that use javascript to run, there should be no error on the console. It will prevent it from working. There are still errors on your site. See this: https://screencast-o-matic.com/watch/cFni3FoCVm. It seems coming from Sassy Social Share plugin. Please fix the error, clear cache and try again.

Hi, Lely!

Before I check out the sassy social share plugin. Is it possible that the search is hidden somehow only in desktop view? I couldn’t see in chrome but this is what I found in Firefox. Afterwards, I did a search using my mobile device and the search works there, but still not on the desktop. Please check it on your end.

<i class="x-icon-search"data-x-icon=""aria-hidden=“true”>
class=“x-hidden-desktop”>Search

Hi,

To hide it in desktop, you can add this in Theme Options > CSS

.x-navbar .desktop .x-nav>li.x-menu-item-search {
    display:none !important;
}

Hope that helps

Hi, Paul!

I Do not wish to hide the Certs absent on desktop. I am actually trying to get it working.

Hi there,

It’s not working on my mobile either. But when I checked the code, the search is there, it won’t just trigger. I noticed that some CSS and javascript are served through Autopmize and CF, would you mind providing your CF login credentials as well? And please temporarily remove your SEO optimization in your header, it triggers so many errors which is harder for use to trace the real issue. I’m not saying that your optimization is the culprit, we just need to narrow down our search.

Thanks for understanding.

Hi, Rad!

The search box is working now both on mobile and desktop. I’m not sure why, but I just hope it continues while I count my lucky stars. Thanks for all of your help.

Glad to hear that. Have a nice day! :slight_smile:

1 Like

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