Moving Search Icon right on dawn theme?

Store Design
,

Topic summary

A user seeks help repositioning the search icon to the right side of their Dawn theme header to ensure proper display across all devices.

Current Issue:

  • Search icon appears in an undesired location (screenshot provided showing header layout)
  • User unable to find existing solution

Proposed Solutions:

Solution 1: One responder requests the store URL and password to review the site and provide customized code.

Solution 2: Another contributor offers immediate CSS code to resolve the issue:

  • Navigate to Actions > Edit code > Assets > base.css
  • Add provided CSS snippet at bottom of file
  • Code modifies grid template for screens 990px+ width, repositioning header elements including the search icon

Status: Discussion remains open; user has not yet confirmed which solution they’ll implement or whether either approach successfully resolved the positioning issue.

Summarized with AI on October 29. AI used: claude-sonnet-4-5-20250929.
1

Please help couldn’t find an answer how to move search icon to the right side so it would be good on all devices?

Screenshot 2025-04-09 at 22.20.17.png
Screenshot 2025-04-09 at 22.20.17.png2062×336 357 KB

2

Hi @Noimix1 ,

Could you please share your Store URL and password (if applicable) so that I can review it and provide you with the appropriate solution code?

Looking forward to your response.

Thanks!

3

Hi @Noimix1 ,

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 {
            grid-template-areas:
        "heading icons left-icons "
        "navigation navigation navigation" !important;
    grid-template-columns: 1fr auto auto !important;
    }
}