How to align my header icons in mobile view dawn theme

Shopify Discussion
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.

3

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

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

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;
}

}

}