Logo jumping to left on mobile dawn theme (padding loading later)

Store Design
, , , , ,

Topic summary

Mobile logo shifts left on Dawn theme due to padding appearing after load. Store uses a sticky header and a custom search bar; the issue manifests on mobile with padding near the cart icon causing the logo to move.

Resolution: Adding CSS in header.liquid to disable the pseudo-element creating the padding fixed the jump:

  • .page-width:after { display: none !important; }
    The author confirmed this resolves the logo movement.

Unresolved: Reducing the mobile header/logo size. Previous attempts had no effect, and no working solution was provided in the thread.

Status: Primary issue (logo jump) resolved; header size reduction remains open.

Summarized with AI on January 13. AI used: gpt-5.
1

Hello!

In my store on the mobile version, when the store loads, the logo is centered and when the page loads, a padding is created on the right side next to the shopping cart icon and the logo analogously moves to the left. In the code, I added a custom search bar visible on both the desktop version and the mobile version (maybe this has some connection)?

In addition, I would like to ask how to reduce the size of the logo/header size on the mobile version. I have tried many solutions from the forum but no code editing has any effect. Header takes up way too much space on mobile version… Im using sticky header in my Dawn theme.

https://5a8ab2.myshopify.com/

pass: 123

2

Go customize > edited code > header.liquid and past this code

.page-width:after {
    display: none !important;
}
1 Like
3

Thank you very much, that works!