Menu button at the edge of the page mobile view

[user4152]

Hi,

On the mobile view, the menu button is right at the edge of the page. Does anyone know how to move this in slightly?

Thank you

[StackingContext]

Hi @user4152 , can you share a link to your store and the password if it is password protected?

[devcoders]

Hi @user4152

Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.

Best regards,
Devcoder

[AnneLuo]

@user4152
Can you share your store url?

[Dan-From-Ryviu]

You must share the link to your store so we can review it and provide a solution.

[Nova192]

Hi, I am Nova, a dev from P: Quantity breaks & discounts. Let me help you go through this step by step.

1. You can fix this by adding a small amount of padding or margin to the mobile header or the menu button. First, check Online Store → Themes → Customize → Header. Some themes have a mobile padding or spacing option. If increasing it works, no code is needed. If not, add a small CSS tweak. Go to Online Store → Themes → Edit code, open your main CSS file (often base.css, theme.css, or similar) and add:

@media (max-width: 768px) {
  .header__icon--menu,
  .header__menu-toggle,
  .menu-drawer__toggle {
    margin-left: 8px;
  }
}

If the whole header is too tight on both sides, use padding instead:

@media (max-width: 768px) {
  .header {
    padding-left: 12px;
    padding-right: 12px;
  }
}

If the menu button is positioned with left: 0, override it like this:

@media (max-width: 768px) {
  .header__icon--menu {
    left: 8px;
  }
}

On iPhones, you can also account for the screen safe area:

@media (max-width: 768px) {
  .header {
    padding-left: calc(12px + env(safe-area-inset-left));
    padding-right: calc(12px + env(safe-area-inset-right));
  }
}

After saving, refresh on mobile and the menu button should no longer sit flush against the edge.

[tim_tairli]

This code you’ve added earlier messes with your mobile layout:

.header {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}
details-modal.header__search {
    padding-left: 3.2rem !important;
}

I understand that it’s needed for desktop, so change it like this:

@media (min-width:990px){
    .header {
        max-width: 100% !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    details-modal.header__search {
        padding-left: 3.2rem !important;
    }
}

=>

[user4152]

Thank you for your help, that worked!

Thank you again