Home page logo align to centre - dawn theme

Store Design

Topic summary

A user is experiencing logo and icon alignment issues on their Dawn theme homepage in mobile view. The logo appears too far right, and the search and cart icons need repositioning.

Solutions Provided:

Two community members (PageFly-Henry and David_SHT) offered CSS code fixes involving:

  • Editing the base.css file via Online Store → Theme → Edit code
  • Adding media queries targeting mobile screens (max-width: 767px)
  • Adjusting padding and margins for header elements, logo wrapper, and icon positioning

Current Status:

The initial fix worked, but a follow-up issue emerged: excessive gap between search and cart icons. David_SHT provided additional CSS code to reduce this spacing by setting max-width on the search icon element.

Note: Some text in the conversation appears corrupted or reversed, but the technical solutions and code snippets remain intact and actionable.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

can someone help me align home page logo on top align to centre? if you see logo in provided screenshot is towards to bit right in mobile view. please see screen shot.

Also i want my ‘search and cart’ icons comes closer to each other and move to MORE RIGHT and ‘nav menu’ move to MORE LEFT. please help.

URL: dehshoeshop. com

IMG_6896.jpeg
IMG_6896.jpeg1290×530 40.2 KB

2

Hi @DSS5

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file → Save

@media (max-width: 767px){

header.header.header–top-center.header–mobile-center.page-width.header–has-menu.header–has-social {

padding-left: 5px !important;

padding-right: 0px !important;

}

.header__icon–search span {

margin-left: 26px !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

3

Hi @DSS5 ,

This is David at SalesHunterThemes.

You can try to follow these steps:

Go to Online Store → Themes → Actions → Edit code.

Go Assets folder → base.css file.

Add this following code at the bottom of page.

@media (max-width: 767px){
  .header.header--top-center {
    padding: 2px 1.5rem 2px 1.5rem;
  }
  .header .header__icons,
  .header .header__heading .header__heading-link {
    padding: 0;
  }
  .header .header__heading-logo-wrapper {
    margin-left: -15px;
  }
}

result:

David_SHT_0-1695090831531.png
David_SHT_0-1695090831531.png762×1158 308 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

David | SalesHunterThemes team

4

thanks. its is working good but one small thing still missing. Is it possible to move ‘search’ icon towards cart icon. i mean, between search and cart icons there is a gap. can we reduce that gap. help?

5

Of course, you can add this code:

@media (max-width: 767px){
  .header .header__icons .header__search {
    max-width: 35px;
   }
}

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

1 Like