Dawn Theme - Move Header menu to right side in mobile

Store Design
1

Hello! Can someone help me move the header menu to the right in mobile?

In desktop, it’s already in right side but when it comes to mobile, went back to left. Thanks

2

Hey @Xndysnski
Can you please share your Store URL and Password if enabled?

3

Hello @Xndysnski

To provide you with the most precise solution in this case, could you please share your page URL ( with pass if your store password is enabled )?

Thank you and hope to hear from you.
Best regards,
GemPages Support Team

4

@Xndysnski Do you wants such design?

Alok_Kasgar1_0-1679028423216.png
Alok_Kasgar1_0-1679028423216.png457×296 78.5 KB

If yes, update below css for mobile

.header {display: flex;

grid-template-areas: “left-icon heading icons”;grid-template-columns: 1fr 2fr 1fr;align-items: center;flex-direction: row-reverse;justify-content: space-between;

}

5

Hey @Xndysnski
Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag
6

It works! But when you click the menu, it opens at the left which is weird.

7

@Xndysnski Also Add css

.menu-drawer{right: 0;left: auto;

}

8

Perfect! But the cart icon is on the left, should be at the right before the menu. (Mobile Only)

Is there a way to fix this? Thanks!

9

you can use media query for mobile view

@media (max-width:767px) {
//your css
}