Okay I just did, could I have the mobile view look like this (everything centered)
and the desktop view look like this, please
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.
