Debut Theme move mobile menu to the right

Store Design
1

Hi guys, i am having a problem with my website. It should be easy but i cant make it work and it would be amazing if someone could help me out. It looks fine on the desktop but on the mobile the logo and menu are on the left and it does not look good. It should be like the demo logo to the left and menu to the right. Can you help me move the mobile menu to the right and keep the logo on the left?

2

@Jonas8 ,

Please share your website URL.

3

Thank you, andchairs.com
The mobile menu and logo are both on the left for some reason.

4

@Jonas8 ,

It’s looks as you wanted at my end.

Screenshot 2021-04-22 020117.png
Screenshot 2021-04-22 020117.png483×582 345 KB

5

Skärmavbild 2021-04-21 kl. 23.12.55.png
Skärmavbild 2021-04-21 kl. 23.12.55.png1280×751 142 KB

6

On my phone and i have tried others it looks like this my friend

7

When im logged in customization and look on phone view it looks like this as well.

8

@Jonas8 , on my browser and phone, it looks the same as the screenshot @Muhammad_Ali_S posted. Try clearing your cache and cookies and logging in again to your shopify store. You might want to try it in incognite mode as well.

9

Skärmavbild 2021-04-22 kl. 10.57.24.png
Skärmavbild 2021-04-22 kl. 10.57.24.png1280×799 144 KB

Thank you for having look but it still looks like that for me on my phone and in Shopify customization which is strange. I have cleared the cache and cookies.

10

Looks like your navigation menu is hidden on small screen, so the menu on the right moves to left. You can add this to your CSS file at the very end (go to Themes → Edit code → Assets → themes.scss.css :

@media only screen and (max-width: 749px) {
.site-header .grid--table:nth-child(2){
display: block;
margin-left: auto;
}
}
11

Thank you very much its on the right now but can i move higher up or inline with the logo

Skärmavbild 2021-04-22 kl. 11.24.55.png
Skärmavbild 2021-04-22 kl. 11.24.55.png1273×719 300 KB

12

Skärmavbild 2021-04-22 kl. 11.31.28.png
Skärmavbild 2021-04-22 kl. 11.31.28.png761×415 47 KB

13 
@media only screen and (max-width: 749px) {
.site-header .grid--table:nth-child(2){
display: inline-block;
margin-left: auto;
vertical-align: top;
margin-top: 10px;
}

.site-header .site-header__icons {
    display: inline-block;
}
}

You can change .site-header__icons in the CSS code to display:inline-block;

14

Basically you can simplify your code like this:

/* Navigation Menu */
@media only screen and (max-width: 749px) {
  .site-header .grid {
    display: inline-block;
    width: 45.5%;
    vertical-align: top; }
  .site-header .site-header__icons {
    display: inline-block; }
  .site-header .site-header__icon {
    position: relative;
    top: -2px; }

 .site-header .grid--table:nth-child(2) {
    margin-left: auto; 
    margin-top: 10px;}

  .mobile-nav-wrapper.js-menu--is-open {
    transform: translateY(100px) !important; }
 }
15

Thank you very much its on the right, you are awesome! Its just on thing the menu is overlapping the icons and close button?

Skärmavbild 2021-04-22 kl. 11.50.56.png
Skärmavbild 2021-04-22 kl. 11.50.56.png373×580 23.6 KB

16

Fixed the overlap.

/* Navigation Menu */
@media only screen and (max-width: 749px) {
  .site-header .grid {
    display: inline-block;
    width: 45.5%;
    vertical-align: top; }
  .site-header .site-header__icons {
    display: inline-block; }
  .site-header .site-header__icon {
    position: relative;
    top: -2px; }

 .site-header .grid--table:nth-child(2) {
    margin-left: auto; 
    margin-top: 10px;
    position:relative;
    z-index:9;
}

  .mobile-nav-wrapper.js-menu--is-open {
    transform: translateY(100px) !important; }
 }
17

Now it looks perfect, thanks again you are a super girl!

Wish you all the best:)

Jonas

1 Like