How to move the following

[dariusmuresan]

Hi guys.

I’m trying to move the hamburger menu to the right and the search and cart icons to the left of the mobile header. How can I achieve this?

Theme: Dawn

[AnneLuo]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Add the code below to the base.css file

.header {
    grid-template-areas: "icons heading left-icons" !important;
}
header-drawer {
    justify-self: end;
}
@media screen and (max-width: 1024px) {
 .header__icons {
    justify-self: start;
 }
}

Hopefully it will help you. If yes then Please don’t forget hit Like and Mark it as solution!

[ZestardTech]

Hello There,

1. In your Shopify Admin go to online store > themes > actions > edit code
2. Find Asset > base.css and paste this at the bottom of the file:

@media (max-width:992px){
.header {
grid-template-areas: "icons heading left-icons" !important;
}
header-drawer {
justify-self: end;
}
.header__icons {
justify-self: start;
}
}

[dariusmuresan]

It worked almost perfectly. I need the hamburger menu to be on the rightmost part of the header.

[dariusmuresan]

It worked. All I had to do was add !important after justify-self: end.