Alignment In Menu Bar

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

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

.nav__menu .menu-item.is-menu {
    padding-top: 10px;
}

Best regards,

Thank you, that’s great. Looks so much neater now!

As for the styling… The ‘Home’ icon is white, and underlines on Hover. Is there any way to match this for the search icon too, using CSS?

Please also use the below custom CSS code to achieve this.

#tc-page-wrap .is-menu a:after {
    display: block !important;
    content: "";
    position: absolute;
    width: 100%;
    height: 2px;
    bottom: 6px;
    left: 0;
    visibility: hidden;
    -webkit-transform: translate3d(0,0,0) scaleX(0);
    transform: translate3d(0,0,0) scaleX(0);
    transition: all .3s ease 0s;
    background-color: #fff;
}

#tc-page-wrap .is-menu:hover a:after{
    visibility: visible;
    -webkit-transform: translate3d(0,0,0) scaleX(1);
    transform: translate3d(0,0,0) scaleX(1);
}

#tc-page-wrap .is-menu .search-icon-path {
    fill: #FFF !important;
}

Amazing, that is perfect! Thank you so much!

And thanks for such quick and helpful responses, as well. Really appreciated.

You are always 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.

Done! No worries, I’ll be sure to get in touch if I need anything else. Thanks again.

Thank you very much!

You’re welcome! Actually there is something else you can help me with…!

I have changed the default font of the search form input in the menu bar (to match the rest of the style of the site), using the following code:

.is-search-form input.is-search-input {
    font-family: 'Raleway' !important;
}

However, I have a search form in my left sidebar too, and I cannot seem to do the equivalent and change that font too. What CSS classes do I need to use for the search widget in the sidebar?

You can use the below CSS code to change it.

form.czr-form.search-form label input {
    font-family: 'Raleway' !important;
}

Hey, sorry, one more thing… That alignment is still out of whack on the mobile version of the menu – and the underline styling seems quite wide?

Examples here and here.

You have to contact your theme support to make it work as your theme styles menu items and add menu class in the plugin Menu Search settings If required.

Thank you. I have started a support topic for the theme.

You are most welcome ??