Button in header with search

[ArteyVisualTeam]

Hello i want to put the button search inside the input like this:

but i cant, the button is out the input.

Please help me.

Thanks

[Harry]

Hi,

Hi Artey.

Thank you for choose our theme.

Please add below code to search form below input text http://take.ms/5buV2

<button type="submit"><i class="pe-7s-search"></i></button>

and remove border around input text and add border for search form.

We recommend move all your customize codes to child theme.

Because when you update parent theme all of your customize code will be delete.

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArteyVisualTeam]

I do that but the button is out anyway.

:/

[Harry]

Hi,

Please add below CSS code

#woocommerce-product-search-field-1 {
	border: none;
	background: none;
}
.woocommerce-product-search.hidden-sm {
	border: 1px solid #ccc;
	background: #FFF;
	border-radius: 15px;
}

Kind regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[ArteyVisualTeam]

Hi,

I add the lines of css, now the button is in,  but do not adjust.

I need the search like the bar of woocomerce.

Thnaks!

[Harry]

Hi,

Please add more CSS to reduce width of input field

#woocommerce-product-search-field-1 { width: calc(100% - 100px);}

and change 100px as width of search button.

Regards

Harry
Premium Wordpress themes and plugins, Best WooCommerce theme https://themeforest.net/user/janstudio/portfolio?ref=janstudio

[Author]

Posts