Site logo

Archived topic

Custom search bar in the main menu

3 replies · Started by wilber on October 18, 2018

Viewing posts 1–4 of 4

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

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 :)

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

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.

This archived topic is closed to new replies.