Search Icon and Bar Not Aligned With Menu

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

Please set the menu search form style to default as described on the below page.

https://ivorysearch.com/docs/change-menu-search-form-style/

After setting it, Could you please share your site URL where it’s displaying so that I can help you?

Best regards,

https://ericjkim.com/

Hi, I’ve attached the link to my website and changed the setting to default.
My end goal is to have just the search icon (not the whole bar) showing on the same line as the rest of the menu items, with the search bar appearing when I click the icon.

Hi, just to note, I had to add extra CSS code. If I remove the CSS code, the menu will be duplicated vertically.

https://ibb.co/6HmbVp8

You can align it with the menu by adding the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings

#mega-menu-wrap-main #mega-menu-main li.is-menu {
    display: inline-block;
}

To display a dropdown search form, please change the search form style as described below.

https://ivorysearch.com/docs/change-menu-search-form-style/

Thank you for the reply. I changed the style to dropdown and put the CSS code.
I am wondering if it is possible to move the search icon to the right so that it is more spaced out from the other menu items? Also, when I click the search icon, the box appears right below the icon. Is it possible to move the box to the right on the same line as well?

Regards,

Please also use below custom CSS code to achieve it.

#mega-menu-wrap-main #mega-menu-main li.is-menu a {
    margin-left: 10px;
    vertical-align: text-top;
}

#mega-menu-wrap-main #mega-menu-main li.is-menu.dropdown form {
    left: 25px;
    top: -10px;
}

Thank you so much Sir.
Is there a different code to change the dropdown location in the mobile version of the site? I am also wondering if it is possible to change the size of the dropdown box and the text inside as well.

Is there a different code to change the dropdown location in the mobile version of the site? I am also wondering if it is possible to change the size of the dropdown box

Yes, it is possible and you have to develop more custom code to achieve this.

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.

and the text inside as well.

You can edit the text by using the Search Form Customizer displayed in the Customize section of the search form in the plugin settings.

Thank you for your help.
I do have one last question though. In my gallery page (https://ericjkim.com/gallery/mbft20/), clicking one of the top images causes the image to show up behind the menu bar. Is there any way to fix this?

It seems the issue of the theme that you are using on your website so please contact the theme author to resolve the issue.

I understand. Thank you.

You are most welcome, I’m glad I was able to help you with this matter. There is no obligation but by your kind words I wonder if I could trouble you to leave a review based on this experience here:

https://www.ads-software.com/support/plugin/add-search-to-menu/reviews/

I’d really appreciate that. ??

And if I can be of any further assistance please don’t hesitate to ask.