Can I configure when to render the hamburger menu ?

Highlighted
New Member
3 0 0

Hello, 

This question is for CSS/JS experts with Shopify codings background.

I am customising Debut theme and I would like to render the Hamburger menu on iPad/tablet devices(width: up to 1024px). 

 Currently, Debut theme renders the hamburger menu on mobile media (I think up to 749px width).  

I thought it is going be a simple pixel change, so I had a quick look at theme.js and the main css, but could not figure it out.  

Isn't supposed to simply change the width pixel to tell when to render the hamburger menu? 

0 Likes
Highlighted
New Member
3 0 0

SOLVED.

Thank for  Shopify Support (Sophie) who helped to get this sorted.

Two simple steps to achieve this :

1. theme.scss (add the following codes at the end):

#AccessibleNav {
  @include media-query($medium-down) {
    display: none !important;
  }
}

.site-header__menu {
   @include media-query($medium-down) {
     display: inline-block !important;
   }
}

.logo-align--left {
   @include media-query($medium) {
     width: 40%;
   }
}

.site-header__icons {
    @include media-query($medium) {
      width: 60%;
    }
}

.mobile-nav-wrapper {
  @include media-query($large-up) {
    display: none !important;
  }
}

 

2. header.liquid, find mobile-nav-wrapper, then  change from medium--up-hide to large--up-hide:

    <nav class="mobile-nav-wrapper large-up--hide" role="navigation"><!-- Change to large-up -->

 

DONE .... Hamburger menu should now be rendered on iPad/tablet devices

 

0 Likes
Highlighted
New Member
28 0 0

Please what part of this code do I need to tweak to achieve this same hamburger menu on desktop. Thanks

0 Likes