How to change the header and add an extra one?

[infinipic]

I'm curently using Dawn theme. How to transform my header from this:

To this:

I want to have the menu under the header and the search bar in the middle.

[DaisyVo]

Hi @infinipic 

Step 1: Go to header.liquid file https://prnt.sc/MM-NYrlgIE4r then add this code

<div
        class="search-modal__content{% if settings.inputs_shadow_vertical_offset != 0 and settings.inputs_shadow_vertical_offset < 0 %} search-modal__content-top{% else %} search-modal__content-bottom{% endif %}"
        tabindex="-1" style="grid-area: searchCustom;"
      >
        {%- if settings.predictive_search_enabled -%}
          <predictive-search class="search-modal__form" data-loading-text="{{ 'accessibility.loading' | t }}">
        {%- else -%}
          <search-form class="search-modal__form">
        {%- endif -%}
        <form action="{{ routes.search_url }}" method="get" role="search" class="search search-modal__form">
          <div class="field">
            <input
              class="search__input field__input"
              id="{{ input_id }}"
              type="search"
              name="q"
              value="{{ search.terms | escape }}"
              placeholder="{{ 'general.search.search' | t }}"
              {%- if settings.predictive_search_enabled -%}
                role="combobox"
                aria-expanded="false"
                aria-owns="predictive-search-results"
                aria-controls="predictive-search-results"
                aria-haspopup="listbox"
                aria-autocomplete="list"
                autocorrect="off"
                autocomplete="off"
                autocapitalize="off"
                spellcheck="false"
              {%- endif -%}
            >
            <label class="field__label" for="{{ input_id }}">{{ 'general.search.search' | t }}</label>
            <input type="hidden" name="options[prefix]" value="last">
            <button
              type="reset"
              class="reset__button field__button{% if search.terms == blank %} hidden{% endif %}"
              aria-label="{{ 'general.search.reset' | t }}"
            >
              <span class="svg-wrapper">
                {{- 'icon-reset.svg' | inline_asset_content -}}
              </span>
            </button>
            <button class="search__button field__button" aria-label="{{ 'general.search.search' | t }}">
              <span class="svg-wrapper">
                {{- 'icon-search.svg' | inline_asset_content -}}
              </span>
            </button>
          </div>
          {%- if settings.predictive_search_enabled -%}
            <div class="predictive-search predictive-search--header" tabindex="-1" data-predictive-search>
              {%- render 'loading-spinner', class: 'predictive-search__loading-state' -%}
            </div>
            <span class="predictive-search-status visually-hidden" role="status" aria-hidden="true"></span>
          {%- endif -%}
        </form>
        {%- if settings.predictive_search_enabled -%}
          </predictive-search>
        {%- else -%}
          </search-form>
        {%- endif -%}
      </div>

 Step 2: 

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section

header.header {
    grid-template-areas:
        "heading searchCustom icons"
        ". navigation ." !important;
}

Here is the result: 

This is how we test in our store, if it doesn't work on your store, please share store link

Best,

Daisy

[infinipic]

Thank you for your response.

Unfortunately, didn”t work.

This is the link to my store: www.infinipic.art