Switch menu and cart positions in Dawn theme

Store Design
1

How can I switch my menu bar and shopping cart placements on my home page? I would like the shopping bag icon to switch places with the
menu burger, but would like to keep both icons on the upper right hand corner for mobile view.

I am using the Dawn theme for Shopify. Please see image attached.

2

@ptpsports - can you please share your website link?

3

Sure. Its www.playsthatpay.com

4

@ptpsports - add this css to the very end of your base.css file and check

@media screen and (max-width:749px){
header-drawer{grid-area: icons;}
.header__icons{grid-area: left-icon;}
}
5

That worked but the icons are too close to each other. They are touching.
Please see my homepage.

6

@ptpsports - add this line too margin-left: 0; and check, so code becomes

@media screen and (max-width:749px){
header-drawer{grid-area: icons;     margin-left: 0;}
.header__icons{grid-area: left-icon;}
}
1 Like
7

I tried that but the menu and shopping bag are still touching.

8

@ptpsports - need to use !important, so code becomes

@media screen and (max-width:749px){
header-drawer{grid-area: icons;     margin-left: 0 !important;}
.header__icons{grid-area: left-icon;}
}
9

Thank you, this worked. However, can I put a little more space in between the two items and also make them bold so they stand out a little more on mobile?

10

Hi @ptpsports

This is Victor from PageFly - Shopify Page Builder App, Iā€™d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

@media(max-width: 767px){
.header__icon:not(.header__icon--summary), .header__icon span {
    justify-content: flex-end !important;
}
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly