[Support request] Styling of the search field

[Søren]

I’ve searched but cannot find help on these issues I have with the search field in the header on my
site.

When you click the search icon can the cursor be active from the start?

How do I make the search field non transperant?

Because I have changed the search from the standard WP to YITH when clicking Search button or enter it takes a long time and shows nothing:

https://www.landhave.dk/?post_type=product&s=isolering

Probably nothing to do with GP but do you have a clue why YITH wont show any results? I guess it has something to do with replacing the standard search.

Lastly the z-index of the results conflicts with the product labels – can I give the results a higher index?

[Ying]

Hi Søren,

For the z-index issue, try add this:

.wapl-diagonal-bar .product-label {
    z-index: 2;
}

For other questions, we can’t really help with a 3rd party plugin’s function.

Probably nothing to do with GP but do you have a clue why YITH wont show any results?

Seems only if you enter 3 or more letters, otherwise the search function won’t be activated. I ‘m guessing it’s avoiding showing too many results. It’s better to reach to the plugin support for the answer.

[Søren]

Thanks how about the two first issues, they shouldn’t have anything to do with 3rd party.

It seems strange that you have to click twice to be able to search – is it possible to have the cursor active when clicking the search icon?

How about the transparancy of the field – can it be non transparant?

[Ying]

It seems strange that you have to click twice to be able to search

That’s not the default behavior of GP navigation search, so I don’t think it’s a GP issue.

How about the transparancy of the field – can it be non transparant?

You should be able to change the color at customizer > colors > Navigation Search.

[Søren]

Thanks – I need to be able to know the name of the search icon to be able to set it via JS.

This guy made a solution: https://wordpress.org/support/topic/trying-to-automatically-set-focus-in-the-search-box/

jQuery(function($){
	$('#et_search_icon').on('click', function(){
		setTimeout(function() {$('input.orig').focus();}, 1000);
	});
});

But the icons name is just # when I expect it – can you help me how to locate the header search icon name or maybe a solution to activating this javascript?

[Elvin]

Hi there,

I don’t think this jquery function is applicable to the icon on your site as your icon is placed on a pseudo-element through CSS rather than an actual DOM object.

You can try changing this on Appearance > Customize > General and change the icon type to “SVG”.

You can then use the selector span.gp-icon.icon-search > svg in place of #et_search_icon for the script.

but this shouldn’t be necessary as the default behavior of GP search function doesn’t have to be tapped/clicked twice to open.

The issue is likely caused by a conflict w/ a script.( either from custom scripts or plugins)

[Author]

Posts