How to move the following

dariusmuresan
Tourist
15 0 3

Hi guys.

 

Untitled design.jpgI'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

Replies 4 (4)

AnneLuo
Shopify Partner
614 123 126

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!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

ZestardTech
Shopify Expert
5602 1019 1346

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

 

ZestardTech_0-1716442105962.png

ZestardTech_1-1716442184800.png

 

 

Want to modify or develop new app, Hire us.
If helpful then please Like and Accept Solution .
Email: support@zestard.com
Shopify Apps URL :- https://apps.shopify.com/partners/zestard-technologies
Custom Modifications Into Shopify Theme | Shopify Private App | SEO & Digital Marketing
dariusmuresan
Tourist
15 0 3

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

dariusmuresan
Tourist
15 0 3

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