Solved

Debut Theme move mobile menu to the right

Jonas8
Tourist
12 0 3

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?

Accepted Solution (1)
g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

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; }
 }
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.

View solution in original post

Replies 16 (16)

Muhammad_Ali_S
Shopify Partner
664 121 183

@Jonas8

Please share your website URL.

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Jonas8
Tourist
12 0 3
Thank you, andchairs.com
The mobile menu and logo are both on the left for some reason.
Muhammad_Ali_S
Shopify Partner
664 121 183

@Jonas8,

It's looks as you wanted at my end.

Screenshot 2021-04-22 020117.png

Ali Shahzad | Designer | Developer
- Was my reply helpful? Click Like and Accepted Solution to let me know!
- Feel Free to Contact | Whatsapp +92 3486775142
Jonas8
Tourist
12 0 3

Skärmavbild 2021-04-21 kl. 23.12.55.png

Jonas8
Tourist
12 0 3

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

Jonas8
Tourist
12 0 3

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

g33kgirl
Shopify Partner
390 109 142

@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.

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Jonas8
Tourist
12 0 3

Skärmavbild 2021-04-22 kl. 10.57.24.png

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. 

g33kgirl
Shopify Partner
390 109 142

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

 

 

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Jonas8
Tourist
12 0 3

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

Jonas8
Tourist
12 0 3

Skärmavbild 2021-04-22 kl. 11.31.28.png

g33kgirl
Shopify Partner
390 109 142

 

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

 

If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Jonas8
Tourist
12 0 3

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

g33kgirl
Shopify Partner
390 109 142

This is an accepted solution.

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; }
 }
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.
Jonas8
Tourist
12 0 3

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

Wish you all the best:)

Jonas

g33kgirl
Shopify Partner
390 109 142

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; }
 }
If you found my answer helpful, please LIKE and ACCEPT.
buymeacoffee.com/g33kgirl
If you're not comfortable with code, please modify code files at your own risk.