Dawn Theme > Customizing > Adding Full Search Bar To Header Section

[Penrose]

Hi

We've built our site using the Dawn theme and I want to change the search functionality placement.

Right now its the default setup: click the search icon on the far right for the modal to popup/overlay on the header section. I'd like to change this from the icon-activated search modal to a permeant (without clicking search icon) search bar where the main menu is positioned (when set to "middle left icon" in the theme settings.

I made a mockup to provide a better idea visual of the idea...

I'm aware out of the box it'll require customizing the div tags and css, which I can handle. Just checking if anyone has tried this before and can give me any tips to help jump start on getting it going?

[ZenoPageBuilder]

Hello @Penrose 👋

Many of our users have built their own search field using our app Zeno Builder. The way we do is to add this Liquid code (simplified) to the theme

<form action="/search" method="GET">
  <input type="search" name="q">
  <button type="submit">Search</button>
</form>

You can go to Edit theme, remove the old search code and use this code instead, feel free to modify HTML/CSS to match your brand.

Hope that helps!