how do I add a search bar to top of drawer menu? dawn theme

[vanessabate]

Hi all, I'm wanting to add a search bar to the top of my drawer menu on my mobile site. Does anyone know how to do this?

URL: www.tydejewellery.com

[vanessabate]

Thank you it's worked I have a search bar! Are you able to help me edit it so it looks like the photo attached... So that there is only a bottom border which has padding on either side and reduce the font size

[HELDERWRLD]

Hey @vanessabate ,

can you tell which code you used and where to place it? The message was deleted.

Thank you

[StudioBlank]

Try this method

Step 1: Create a new snippet and name it "drawer-search" and paste this code inside

<link rel="stylesheet" href="{{ 'component-drawer-search.css' | asset_url }}">
  <form action="{{ routes.search_url }}" method="get" role="search" class="drawer-search drawer-search-modal__form">
    <div class="drawer-field">
      <input
        class="drawer-search__input drawer-search-field__input"
        id="{{ input_id }}"
        type="search"
        name="q"
        value="{{ search.terms | escape }}"
        placeholder="Search for..."
      >
      <button class="drawer-search__button">
          {{- 'icon-search.svg' | inline_asset_content -}}
      </button>
    </div>
  </form>

Step 2: Go to "header-drawer" and find "</nav> and add this code above it

{% render 'drawer-search' %}

Step 3: Create a new asset and name it "component-drawer-search" and place this code inside

.drawer-search-modal__form {
  width: max-content;
}

.drawer-field {
  display: flex;
  border: solid thin;
  width: max-content;
  margin-left: 3rem;
}

.drawer-search__input.drawer-search-field__input {
  border: 0;
  font-family: var(--font-body-family);
  padding: 10px;
}

.drawer-search__input.drawer-search-field__input:focus-visible {
  outline: none;
  box-shadow: none;
}

.drawer-search__button:not(:focus-visible):not(.focused),
.drawer-search-reset__button:not(:focus-visible):not(.focused) {
  background-color: #f4f4f4;
  border: 0;
  padding: 10px;
}

.drawer-search__button .icon {
  height: 1.8rem;
  width: 1.8rem;
}