How can I extend the main menu to full screen on mobile?

[MT27]

Hi can you please make the main menu go all the way to the top, with the only thing showing being the logo. Thank you

URL: https://matibrnd.com/

Pass: biangu

[Spac-es]

Add this code to your base.css or theme.css:

.js .menu-drawer {
    width: 100%;
}

Do you want to extend the menu to the entire top section as well? If we do it that way, the header and the logo won’t be visible.

[MT27]

hi, I don’t want the width to be full just the height, and I don’t mind the header don’t showing, but I would like the logo to show! Can we do that?

[Spac-es]

To achieve that, you’ll need to add the following code to your base.css or theme.css file. I hope you like the result!

@media (max-width: 749px) {
  #menu-drawer {
    z-index: -1;
    top: 0% !important;
  }
  a.list-social__link.link {
    color: white;
  }
  .header__icon--menu[aria-expanded=true]:before {
    display: none !important;
  }
  .list-menu {
    margin-top: 50px !important;
  }
  .menu-drawer__inner-submenu {
    margin-top: 90px !important;
  }
  #link-collections {
    overflow: hidden !important;
  }
}

[MT27]

amazing work thank you, one problem though is that when I actually open it from my phone it shows it like this after one second. How can I fix this? Also, nice touch adding the TikTok icon, how can I add other socials like Instagram, Pinterest and facebook.

Thank you.

[Spac-es]

I’ve updated the code and fixed the error you mentioned. I also noticed a design flaw that was causing the dropdown menu not to reach the bottom on other mobile devices like the iPhone.

The TikTok logo was already there; all I did was give it a white color so that it stands out. I assume you can easily add the rest of the social media icons from the Shopify customizer. Pleasure helping out!

@media (max-width: 749px) {
  #menu-drawer {
    top: 0%!important;
    height: 100vh !important;
    z-index: 998 !important;
  }
  a.list-social__link.link {
    color: white;
  }
  .header__icon--menu[aria-expanded=true]:before {
    display: none !important;
  }
  .list-menu {
    margin-top: 50px !important;
  }
  .menu-drawer__inner-submenu {
    margin-top: 90px !important;
  }
  #link-collections {
    overflow: hidden !important;
  }
  summary.header__icon.header__icon--menu.header__icon--summary.link.focus-inset {
    z-index: 999;
  }
  img.header__heading-logo {
    z-index: 999;
    position: relative;
  }
}

[projectthirteen]

Hey @Spac-es , would it be possible to make this code applicable for desktop view as well as this only covers the header in the mobile view and not both. Would really appreciate it.

Thanks.

[Spac-es]

You want the menu on PC devices to span the full width of the screen, just as it does on mobile devices?

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

[projectthirteen]

No sorry I wanted it to look like below (see attachment) on the website but full screen on mobile although putting your code in changes them both.

Could make it just for the desktop view?

[Spac-es]

Your words are still a bit unclear to me hahaha, I think you’re looking for this.

Mobile

Add this code:

@media (max-width: 749px) {
  div#menu-drawer {
    width: 75vw !important;
  }
}

Delete this code (line 3583 base.css):

top: 0% !important;

After / Before