[Support request] Custom search bar in the main menu

[wilber]

I need to have a search bar in the main navigation like this http://prntscr.com/l7s3ve and that is also visible in mobile view

[Tom]

Hi there,

Adding the search bar to the menu wouldn’t be an issue, but you’d need to find a solution to the search bar itself. Being able to choose a category on the left to search would need some custom coding or a specific plugin.

If you have the search bar done, let me know, and I’ll help with inserting it into the menu 🙂

[wilber]

I do not need the filter of category enough to have the search bar in the main menu and to see it in mobile view

THIS IS WHAT I WANT TO ACHIEVE https://prnt.sc/lgu0ql

[Tom]

You can achieve that overall layout by placing the search widget in the header widget area and setting your navigation location to float right.

Then you can add this CSS:

.inside-header {
    display: flex;
    align-items: center;
}

.site-logo {
    order: 1;
}

.header-widget {
    order: 2;
    margin-left: auto;
    top: auto !important;
    margin-right: 20px;
}

.main-navigation {
    order: 3;
}

Depending on browser support needed, you may want to run it through this tool: https://autoprefixer.github.io/

Then it will likely need some CSS tweaking for style.

[Author]

Posts