Search bar

Hello,
i want to add search bar in mobile view but somehow it goes here : http://prntscr.com/mloyxl
is it possible to make it looks like this ? http://prntscr.com/mlozhh
thanks in advance

Hello,

It is possible to do with custom CSS, add this code to the Theme Settings > Custom CSS > Global:

.mobile-nav .woodmart-search-form .searchform .searchsubmit {
    background-color: green;
    color: white;
	margin:5px 0 5px 0;
}
body .mobile-nav .searchform input[type=text] {
    height: 40px;
	background-color:white;
	margin:5px;
}
body .woodmart-search-form{
background-color:#f9f9f9;
padding:50x 0;
}

Change the colors as per your needs.

Best Regards

Hello, i didn’t meant to change the style of it i meant to drag it from here : http://prntscr.com/mluzyl to there http://prntscr.com/mlv0on

Hello,

Make the bottom row sticky and visible on mobile in the row settings, add the search element there. https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/ and https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

Hello, apparently the search icon is at the right place : http://prntscr.com/mlykk3 but i didn’t need that here is what i want : http://prntscr.com/mlyl2l i want the search bar to be exactly like this i mean the whole form of search bar.

Hello,

1. Create an HTML block, add AJAX Search element https://xtemos.com/docs/woodmart/html-blocks-2/

2. Add this HTML into the Header Builder mobile view https://xtemos.com/docs/woodmart/header-builder/header-responsive-settings/ and https://xtemos.com/docs/woodmart/html-blocks-2/#header_builder

3. Make sure the row where you add the search is visible on mobile https://xtemos.com/docs/woodmart/header-builder/header-rows-columns-configuration/

Best Regards

Yup. that’s what i needed thanks it worked !

You are welcome! If you have any questions please feel free to contact us.

Best Regards

[Author]

Posts