How to make mobile menu drawer full page on shrine pro?

[GoombaGrows]

Looking to remove that small gap on the right side when in the mobile drawer menu.

Thanks in advance!

[SkillUpDennis]

1. Add Custom CSS

Go to Online Store → Themes → Customize → Theme Settings → Custom CSS (or in your theme.css / theme.scss.liquid) and add:

/* Remove right gap in mobile drawer menu */
.mobile-nav,
.mobile-nav__wrapper,
.drawer__inner {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the menu spans full width */
.mobile-nav__content {
  width: 100% !important;
  box-sizing: border-box;
}

---

2. Test on mobile

• Preview your site on a mobile device or in the browser’s mobile view

• Check that the drawer now aligns perfectly with the right edge

[GoombaGrows]

@SkillUpDennis

/* Remove right gap in mobile drawer menu */
.mobile-nav,
.mobile-nav__wrapper,
.drawer__inner {
  padding-right: 0 !important;
  margin-right: 0 !important;
}

/* Ensure the menu spans full width */
.mobile-nav__content {
  width: 100% !important;
  box-sizing: border-box;
}

I am not able to get this to work tried in theme.liquid and custom css. I could not find theme.css or theme.scss.liquid website: https://qz26pn-cv.myshopify.com/ password: bagono

[Dan-From-Ryviu]

Please add this code to Custom CSS in your Theme Settings

.menu-drawer {
  width: 100vw !important;
}

Best regards,
Dan from Ryviu: Product Reviews App

[tim_tairli]

I’d second @Dan-From-Ryviu answer with one warning – theme switches to drawer menu when screen width is less than 990px, so it may become a bit too wide on, say iPad.

Maybe wrap that code with media-query like this:

@media (max-width:750px) {
  div#menu-drawer {
    width: 100vw;
  }
}

[GoombaGrows]

@Dan-From-Ryviu

.menu-drawer {
  width: 100vw !important;
}

This worked thank you!!

[GoombaGrows]

Thank you for this!!!

[Dan-From-Ryviu]

You are most welcome!