Solved

Make main menu on mobile full

MT27
Explorer
68 6 3

IMG_2659.png

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

 

 

Accepted Solution (1)
Spac-es
Shopify Partner
301 90 114

This is an accepted solution.

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

 

View solution in original post

Replies 5 (5)

Spac-es
Shopify Partner
301 90 114

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

 

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

 

Captura.PNG

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
Explorer
68 6 3

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
Shopify Partner
301 90 114

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

 

1.PNG2.PNG

 

MT27
Explorer
68 6 3

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.

b98e8df9-2a73-4fc5-b8dd-6e7545fd3151.jpg

Spac-es
Shopify Partner
301 90 114

This is an accepted solution.

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