Search bar on Navigation menu

Hi! I just started Designing my first website on Webflow and I’m not sure how to add the search bar on the Navigation menu… I want to add it right next to the logo, as the image below.
I would appreciate your help. Thank you


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

If your nav bar is a Symbol (i.e. it turns green on hover), you first need to double click to edit it.

Then, look for the Search element in the left menu. The menu button looks like this:

image

And the Search element looks like this:

image

Drag the search element from the left menu onto the nav bar where you want it positioned. I encourage you place it inside the Container element alongside the logo, assuming that’s how your nav bar is set up.

You will then need to edit the styling and margins/padding from the right menu of both the search button and the bar itself.

Also, a good forum habit for support is to provide a read-only link, which can be created here:

image

[https://preview.webflow.com/preview/new-eac8de?utm_medium=preview_link&utm_source=designer&utm_content=new-eac8de&preview=135e8acb61b37630e49a2aed26af06ec&mode=preview]

Here it is, thank you for your help :slight_smile:

@ctrav Thanks for this! I was able to put the search bar in the navigation, but am having a hard time getting the search button to align to the right of the search bar and having the search bar ‘box’ go the full height of the Nav Bar. Any tips?

Also - @Joana_Pereira Your site looks great!

my read only link: //preview./preview/outwhere-landing-page?utm_medium=preview_link&utm_source=designer&utm_content=outwhere-landing-page&preview=8f5b3c4c26549c65fedbe14f6ffe3242&mode=preview

Dope website. For starters, click on the “Search” parent element and set these Layout settings in the right menu:

image

Should get you on the right track.

1 Like

Thanks! Oh duh, flexbox.