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.

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

1) I tried with the default style, and now the button and the box are in two lines. I tried with some css code you wrote in the forum but can’t work it out. Can you please help me?

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

.is-menu form label {
    max-width: 80%;
    display: inline-block;
}
.is-menu form input.search-submit {
    width: auto;
    margin: 0;
} 

2) it will be great to have it in the right side with a narrower button. also, I see other people have the small “search icon/symbol” button rather than the text. How can i change it?

You can achieve it by changing menu search form style other than Default as described on the below page.

Change Menu Search Form Style

3) I also tried some other styles, but then I can not see anything display in the menu area, which does exist when I move the mouse pointer to the position. is it because of the color of the menu is black? what I can do if I want to use slide or other style?

Yes, you are right as the search icon has black color.

You can change seach icon color to white using below custom CSS code.

.is-menu path.search-icon-path {
    fill: #FFF;
}

Best regards,
Ivory Search Support