Home › Forums › WoodMart support forum › Search bar Search bar This topic has 7 replies, 2 voices, and was last updated 6 years, 5 months ago by Elise Noromit. Viewing 8 posts - 1 through 8 (of 8 total) Author Posts February 15, 2019 at 9:35 pm #107794 christnolan77Participant 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 February 16, 2019 at 9:15 am #107828 Elise NoromitMember 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 February 16, 2019 at 11:06 am #107845 christnolan77Participant 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 February 16, 2019 at 4:33 pm #107887 Elise NoromitMember 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 February 16, 2019 at 5:03 pm #107896 christnolan77Participant 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. February 16, 2019 at 7:47 pm #107919 Elise NoromitMember 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 February 16, 2019 at 8:58 pm #107927 christnolan77Participant Yup. that’s what i needed thanks it worked ! February 17, 2019 at 6:57 am #107940 Elise NoromitMember You are welcome! If you have any questions please feel free to contact us. Best Regards Author Posts Viewing 8 posts - 1 through 8 (of 8 total) You must be logged in to create new topics. Login / Register
.
