How do I align search and cart with the menu in the dawn theme?

Topic summary

Goal: Align the cart (and optionally search) with the main menu on the right side in Shopify’s Dawn theme, and customize desktop/mobile layouts.

Desktop updates:

  • Applied CSS in base.css to move the inline menu to the right, hide the search, and adjust grid areas and flex layout. Result: Menu aligned right next to the cart, search removed, and logo/heading positioned as requested.

Mobile updates:

  • Used CSS media queries (rules that apply below 767px) to hide the header-drawer (mobile menu), reposition the heading, show the inline menu, and move icons. Fixed a missing closing brace to make styles apply.
  • Later moved code from base.css to theme.liquid (main layout file) to stabilize mobile behavior, then centered “Shop, About, Cart” under the heading and equalized their spacing.

Final refinements:

  • Adjusted heading (logo) font size via CSS (.header__heading-link .h2 { font-size: 28px; }).

Notes:

  • CSS (Cascading Style Sheets) changes and screenshots were central to the solution. Key selectors: header-drawer (mobile drawer menu), .header__inline-menu (horizontal menu), .header__icons, .header__search.

Outcome: The requested desktop and mobile layouts were achieved; search removed, items centered on mobile with equal spacing, and heading font size updated. Status: Resolved.

Summarized with AI on January 12. AI used: gpt-5.

Okay I just did, could I have the mobile view look like this (everything centered)

and the desktop view look like this, please