Navigation and Logo all the way to the left - Refresh Theme

Store Design
,

Topic summary

Issue: On the Shopify Refresh theme (mobile), the logo and navigation have large left-side and inter-item gaps despite using the “middle left” header setting. The request was to reduce these gaps only on mobile.

Context: The store URL and temporary password were shared for review. Images were provided showing the spacing issue and, later, an unintended horizontal line after a code change (visuals were central to illustrating the problem).

Attempts:

  • Adding CSS in theme.liquid before led to an unwanted line on both desktop and mobile and did not fix spacing.
  • Applying a CSS rule to “.header” with reduced padding (e.g., 5px) improved navigation spacing, but it moved the entire header on desktop and mobile, and the logo remained too centered on mobile.

Outcome: The thread author later confirmed the issue was resolved. No final, detailed code for a mobile-only fix (e.g., via media queries) was posted in-thread.

Status: Resolved, with the effective change implied to be CSS-based adjustments to header spacing; exact final implementation not documented.

Summarized with AI on December 21. AI used: gpt-5.
7

@DTours , try now

.header { padding: 5px !important; }