I hope you are well today and thank you for your question.

Currently, the plugin does not provide this functionality but we are implementing it which will be available in the future version of the plugin.

Best regards,
Ivory Search Support

I hope you are well today and thank you for your questions.

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

li.is-menu.dropdown form {
    left: 0;
    min-width: 250px;
}

.is-menu.dropdown form input.is-search-input {
    font-size: 16px;
    font-family:"Playfair Display", sans-serif;
}

Best regards,
Ivory Search Support

This is implemented in the latest released plugin version.

I hope you are well today and thank you for your question.

Could you please share the page URL from your site where it is displaying so that I can help you to change its hover color?

Best regards,
Ivory Search Support

1/ can I move the whole search bar and button to the leftmost edge of the black area? Please refer to my attached question 1 pic

Please try using below cusotm CSS code to achieve it.

@media only screen and (min-width: 992px){
.site-navigation ul li.is-menu {
    position: absolute;
    right: 0;
    top: 10px;
}
}

1.1/ after adding the CSS code you share, if I add one more menu item from my menu widget, will it affect the current layout/position of the search bar? I would like it not to affect.

No, it won’t affect.

2/ can I use the icon button instead of the text button with the current default style? Please refer to my attached question 2 pic

To achieve that, please edit the search form in the plugin options and use its Search Form Customizer in the Customize section and change the search form style having icon in the search button.