How to move header icons towards middle of header - dawn theme

Store Design

Topic summary

Issue: Move header icons inward on a Dawn theme header.

Context: Original post included a screenshot of the header; several respondents requested the store URL (and password if unpublished), but no link was provided publicly.

Solution provided: A CSS tweak in Assets > base.css using a desktop-only media query (min-width: 990px):

  • Increase left padding on the search area (.header–top-center > .header__search) to shift it inward.
  • Increase right padding on the icon container (.header__icons) to pull icons toward the center.
  • Suggested values: 5rem for both sides.

Technical note: The media query targets larger screens, ensuring layout changes apply on desktop. Adjusting padding alters spacing without changing element order.

Outcome: The original poster confirmed this CSS was exactly what they needed. No further changes or URL review required.

Status: Resolved; no outstanding questions.

Summarized with AI on December 18. AI used: gpt-5.
1

Is there a (somewhat) simple way to move these icons inwards slightly? Thank you

Capture.PNG
Capture.PNG1920×437 92.9 KB

2 Likes
2

@Gullivers - can you please share this page link?

3

Hello @Gullivers
Our team is ready to help you.
Please share your website URL so that we can check and assist you.

4

Hi @Gullivers

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

5

Hi @Gullivers ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media screen and (min-width: 990px) {
.header--top-center>.header__search {
    padding-left: 5rem;
}
.header__icons {
    padding-right: 5rem;
}
}
6

Sorry for the delay, I appreciate everyone’s assistance but this was bang on what I was looking for! thank you!

1 Like