How to align my header icons in mobile view dawn theme

Shopify Discussion

Topic summary

A Shopify store owner using the Dawn theme reports header alignment issues on mobile devices. The store logo, cart icon, and user icon are pushed to the far right and not visible in mobile view, though they appear correctly in tablet mode.

Attempted Solutions:

  • DaisyVo suggested adding CSS code to theme.liquid file to modify the grid template areas for the header. However, this solution caused layout problems on both mobile and desktop views.

  • bryan76 proposed adding custom CSS to the header section in the theme editor, using negative margins to adjust logo positioning. The initial code (margin-right: 30px) didn’t work, prompting a revised suggestion with margin-left: -30px.

Current Status:

The issue remains unresolved. The original poster has tested both solutions without success. Screenshots demonstrate the misalignment problem, showing elements are visible in tablet view but disappear off-screen in mobile view.

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

Hi everyone,
I have a problem with my header on mobile, at first I was wondering where did my header icons go, but when I expand the view to tablet mode the store logo, cart icon, user icon, has been move to the end right. So it is not visible in mobile mode. I wanted these elements to be visible on mobile. Does anyone know how can I centered it again to mobile? See photo for reference:

Store Preview URL: https://njm7880s3hx9loio-13830324282.shopifypreview.com

Tablet mode:

IntechCarl_0-1741244942280.png
IntechCarl_0-1741244942280.png482Ă—643 147 KB

Mobile Mode:

IntechCarl_1-1741244976667.png
IntechCarl_1-1741244976667.png698Ă—829 109 KB

2

HI @IntechCarl

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
header.header {
    grid-template-areas:
        "left-icons heading icons"
        "headerSearch headerSearch headerSearch" !important;
}
{% endstyle %}

DaisyVo_0-1741248378322.png
DaisyVo_0-1741248378322.png347Ă—258 45.4 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

1 Like
3

in the Custom CSS of the header in the theme editor:

@media screen and (max-width: 749px) {
.header__heading-logo {
margin-right: 30px;
}
}

1 Like
4

@DaisyVo Hi! Thank you for your response, but this is what it looks like after applying your code:

in mobile

IntechCarl_0-1741250074436.png
IntechCarl_0-1741250074436.png472Ă—585 70.3 KB

in Desktop

IntechCarl_1-1741250100295.png
IntechCarl_1-1741250100295.png1394Ă—810 129 KB

5

hi @bryan76 , nothing happens after inserting your code in header custom css in theme editor

6

@media screen and (max-width: 749px) {
.header__heading-logo {
margin-left: -30px;
}

}

}