Repositioning Logo & Centering Search Box and addition of a divider line

Topic summary

Header layout customization in Shopify Dawn: logo on the left, centered search box, and a subtle black divider line. The requester shared a reference image and site URL for clarity.

Proposed fix: add custom CSS in theme.liquid before the tag, wrapped in . Desktop-only via @media (min-width: 990px). Key rules:

  • .header .header__heading → grid-column: 1 and display: flex to position the logo left.
  • .desktop-search → position: absolute; left: 50%; transform: translateX(-50%) to center the search bar.
  • .header__inline-menu → border-top: 3px solid black; padding-top: 1rem for the divider.

Issue encountered: initial code did nothing and appeared unformatted because the tag was omitted. After adding the style wrapper, the requester confirmed it worked.

Notes:

  • The provided CSS targets desktop only; the original ask mentioned a divider for mobile as well, which isn’t explicitly covered in the final snippet.

Outcome: resolved; layout changes applied successfully on desktop.

Summarized with AI on December 28. AI used: gpt-5.

never mind. I figured it out. Thank you for the help. Much appreciated your time. :slightly_smiling_face: