Menu Search is taking up 2 lines

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

As this is your site theme CSS specific issue so to resolve it I want to access your site when the issue displays on it.

Could you please reproduce the issue on your site by enabling search form in menu and add the below CSS code in the Custom CSS option of Ivory Search plugin settings on the path Ivory Search -> Settings -> Settings so that it will be displayed only for me?

.is-menu {
display: none;
}

Best regards,

Ok it is done

I visited your shared site but it seems you have not enabled search in menu.

Please first display search in menu then use above shared CSS code to hide it for users.

It may be a caching issue. I have cleared cache and double checked. Please check again.

To achieve it please try replacing above shared CSS code with below custom CSS code.

#header .is-menu .searchform input#s {
    width: 180px;
    float: left;
    margin-bottom: 0;
}

Hi there Vinod,

That has fixed the issue, thank you, but unfortunately has created another issue where it is too wide. The field to type your search query is also indistinguishable from the submit button so users will click on the search to type the desired query but will be taken to a search results page for a blank search. This will cause mass confusion.

The field to type your search query is also indistinguishable from the submit button so users will click on the search to type the desired query but will be taken to a search results page for a blank search. This will cause mass confusion.

Actually the theme you are using on your site generates search form and styles it, the Ivory Search plugin only displays it in the navigation menu and controls the search criteria.

It seems the theme you are using doesn’t style search form correctly displayed in the navigation menu but we can style it developing CSS code.

Could you please display the search form again on your site so that I can help you?

Hi Vinod,

I have enabled the form again and you can see how it looks live. Please can you help me to move the search bar to align to the right and let it display a bit better as per my previous messages.

Once it looks good I will ask about configuring the search to find data in my tables. I have made a seperate ticket for this that I will update once we have the search bar looking good.

Thank you.

Please set the search form style to Default in the plugin Menu Search settings.

Please use the below custom CSS code to style it.

#header .is-menu #searchform {
    background: transparent;
    border: 0;
}

#header .is-menu .searchform input#s {
    background: #FFF;
    border: 1px solid #908c8c;
}

#header .is-menu .searchform #searchsubmit {
    background: #dad8d8;
    border-radius: 0 20px 20px 0;
    border: 1px solid #908c8c;
}

That looks much better, thank you, but it is taking up 2 lines again. Have a look.

To make it display in one line, please also use the below custom CSS code.

#header .is-menu .searchform input#s {
    width: 180px;
    float: left;
    margin-bottom: 0;
}

#header .is-menu .searchform #searchsubmit {
    width: 110px;
}