How to change the header and add an extra one?

Store Design

Topic summary

A user working with Shopify’s Dawn theme wants to restructure their header layout. The goal is to move the navigation menu below the logo and position the search bar in the center of the header.

Proposed Solution:
Another user provided a two-step approach:

  • Add custom code to the header.liquid file to reposition the search element
  • Insert CSS into Theme Settings > Custom CSS to modify the grid layout using grid-template-areas

The solution included screenshots showing the expected result.

Current Status:
The proposed fix did not work on the original poster’s store (www.infinipic.art). They shared a screenshot showing the unchanged header layout. The discussion remains open with the issue unresolved, awaiting further troubleshooting or alternative solutions.

Summarized with AI on November 2. AI used: claude-sonnet-4-5-20250929.
1

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

infinipic_1-1735946516851.png

To this:

infinipic_0-1735946494938.png
infinipic_0-1735946494938.png1144×101 13.9 KB

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

2

Hi @infinipic

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


        {%- if settings.predictive_search_enabled -%}
          
        {%- else -%}
          
        {%- endif -%}

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:

image_720.png
image_720.png720×336 87.1 KB

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

Best,

Daisy

3

Thank you for your response.

Unfortunately, didn”t work.

infinipic_0-1736084199196.png
infinipic_0-1736084199196.png1426×114 5.82 KB

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