Let’ see about how to use & customize Ivory Search Plugin WordPress content management system (CMS) platform. Actually WordPress us default Search Navigation bar every users who are install their software on particular website. But the default search bar has some limited features only which means it’s fetch relevant keywords. Here the Ivory search plugin feature is it’s provide us Live Ajax search suggestion for our existing Woocommerce products, post, images, page, category, tags and more.

Through this we easily able to find whether the particular post title or keyword available or not in the website. No need to enter search button or icon to retrieve details from server side of database end. It’s automatically give us perfect results so we easily able to judge and take decision for further search improvements.

Till date number of competitors are available against of Ivory Search Bar plugin. But no one able to beat it because they are provide more features in free version. This is also one of the major reason for why Ivory getting more installation and reviews from user side. Overall very clean and concepts are working fine.

Advantage

1. Ajax Search
2. 4 Pre-build Search Forms
3. Create Multiple Form
4. Space for add additional CSS & JavaScript (JS) file.
5. Support Widgets
6. Shortcode Features

and more minor features are available Ivory search plugin. In below I just add major benefits only so you can check live demo and source code on upcoming sections. End of the article you get clear cut idea like how to use and customize the search bar as per your own requirements. But for that you need some knowledge in CSS, then only able to make some changes on design concept.

Disadvantages

The only one disadvantage is there is no option for customize css via themes. So it’s very complicate process for who have no knowledge in web technology languages like HTML and CSS. But don’t worry just use my below code and paste on your custom css textbox location.

Live Demo – Ivory Search Plugin WordPress

First I share the company official live demo after that will share my own customize css code for your project implementations. You can access more points when visit the Ivory support forum which is available on support section. This forum helps to how customize the code on search bar, thousands of developers are share their code for our development purpose in this project.

Customize CSS Code – Ivory Search Plugin WordPress

Okay let’s see how add the below code on your website/blog to make attractive search box for end users. First go Ivory plugin and one option available for add he custom CSS file on your project. Open the text box and place below code.

.is-form-style input.is-search-input {
height:61px;
color:black;
font-size:19px;
font-family:sans-serif;
border-radius:10px;
padding:0 20px;
border: 2px solid #000;
}
.is-form-style input.is-search-submit, .is-search-icon {
background:white;
border:1px solid white;
}
.is-form-style.is-form-style-3 input.is-search-input {
border-right:1px !important;
}
.is-form-style input.is-search-submit, .is-search-icon {
background:none;
border:none;
}
.is-search-icon {
display:none;
width:0;
}
.is-search-icon svg {
display:none;
}
.is-form-style button.is-search-submit {
background:none;
width:0;
height:0;
}
.is-form-style input.is-search-submit, .is-search-icon {
height:0px;
}

Through the code you can customize colors, buttons, placeholder, icons, layout, padding and more. You can apply entire CSS code to make a better search navigation bar for your project. Once I would like to share screenshot who are not open the live demo options.

Conclusion

I hope above steps are helps to build your own search bar. Suppose if you are looking for more customization works then just contact me via WhatsApp (+91 8940379384) and keep in mind you have to pay amount for further support. For more WordPress related tutorials just visit her official page to know more clarifications.