never mind. I figured it out. Thank you for the help. Much appreciated your time. ![]()
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.