Dawn theme: Move header menu to the right side. Keep logo on the left

Store Design

Topic summary

Users are seeking to customize the Dawn theme header by moving the navigation menu to the right side while keeping the logo on the left. The default Dawn theme doesn’t offer this customization option natively.

Primary Solution (Desktop):
Add CSS code to base.css file:

  • For basic right alignment: .header--middle-left .header__inline-menu {text-align: right;}
  • For Dawn 2.0: @media screen and (min-width: 990px) {.header--middle-left {grid-template-columns: 1fr !important;}}

Mobile Version Solution:
For moving the hamburger menu icon to the right on mobile devices, a different CSS snippet is required that modifies grid template areas and header-drawer positioning.

Key Points:

  • Solutions vary depending on Dawn theme version (original vs. 2.0)
  • Different code needed for desktop vs. mobile layouts
  • Multiple users successfully implemented the fixes with guidance from KetanKumar
  • One user reported the customization reverted after a theme update, requiring code to be re-applied

Status: Ongoing support thread with working solutions provided for various Dawn theme versions and device types.

Summarized with AI on October 31. AI used: claude-sonnet-4-5-20250929.
39

Hi Ketan. Code is working, but when I checked the mobile placement, header menu went to the left instead of right. Can you help?