How to add a search bar to mobile navigation drawer?

[Luxurymrkt]

Hi I’m looking to replace the search navigation with a search bar in the drawer . My site  is https://b32b39-5.myshopify.com/products/copy-of-test

[StudioBlank]

Hey try this method.

Step 1: Create a new snippet and call it "drawer-search"
Step 2: 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 3: Go to "header-drawer" and find "</nav> and add this code above it

{% render 'drawer-search' %}

Step 4: Create a new asset and name it "component-drawer-search"

Step 5: Paste 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;
}

Let me know if it works
www.studioblank.store