Sorry for the late reply.

You can hide regular search form on mobile by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

@media (max-width: 491px){
#header .header-center form {
    display: none !important;
}
}

Then display search icon on mobile as described on the below pages.

Display Search Form In Mobile Site Header

Change Menu Search Form Style

After that, we can position it using CSS.

You are always welcome here 🙂

Thank you very much for rating the plugin.

You can resolve this by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

nav.slicknav_nav .is-menu a {
    display: none;
}

nav.slicknav_nav .is-menu form {
    display: block !important;
    position: static;
    opacity: 1 !important;
    margin-left: 15px;
}

Thank you for providing detailed information.

I tried to reproduce the issue on my website but I couldn’t so it seems specific to your website.

Perhaps this is because we are lazy-loading some JavaScripts or CSS at the end of the page? I do not know why it was happening.

This can be an issue so you can try temporarily deactivating the lazy-loading and test it.

Also, I can see you are using some cache on your website so you can also try clearing the cache.

Thank you for sharing your site URL.

I visited your website and saw your website theme has created a custom search bar therefore it is not controlled by the Ivory Search plugin.

You can change the theme search bar functionality by developing a custom code contacting the theme author.

If you are not a developer then you can consider hiring a developer to develop it for you. You can hire a developer from any freelance site or WordPress agency.

You can also consider us to develop it for you using the form https://ivorysearch.com/custom-work/