Debut hamburger menu not working

Highlighted
Excursionist
27 2 2

The Debut hamburger menu is not working on mobile.  I've made a number of changes to files and I didn't keep records (of course).  Is there a way to figure out why it isn't working?  The rest of the menu is working.

perfectfitchocolate.myshopify.com

0 Likes
Highlighted
Shopify Expert
665 170 201

Hi, @pmartensen,

This is Evita from On The Map

 

In theme.js file make sure that openMobileNav() function looks like this: 

 

function openMobileNav() {
    var translateHeaderHeight = cache.$siteHeader.outerHeight();

    cache.$mobileNavContainer.prepareTransition().addClass(classes.navOpen);

    cache.$mobileNavContainer.css({
      transform: 'translateY(' + translateHeaderHeight + 'px)'
    });

    cache.$pageContainer.css({
      transform:
        'translate3d(0, ' + cache.$mobileNavContainer[0].scrollHeight + 'px, 0)'
    });

    slate.a11y.trapFocus({
      $container: cache.$sectionHeader,
      $elementToFocus: cache.$mobileNavToggle,
      namespace: 'navFocus'
    });

    cache.$mobileNavToggle
      .addClass(classes.mobileNavCloseIcon)
      .removeClass(classes.mobileNavOpenIcon)
      .attr('aria-expanded', true);

    // close on escape
    $(window).on('keyup.mobileNav', function(evt) {
      if (evt.which === 27) {
        closeMobileNav();
      }
    });
  }

and closeMobileNav() looks like this: 

 

 

function closeMobileNav() {
    cache.$mobileNavContainer.prepareTransition().removeClass(classes.navOpen);

    cache.$mobileNavContainer.css({
      transform: 'translateY(-100%)'
    });

    cache.$pageContainer.removeAttr('style');

    slate.a11y.trapFocus({
      $container: $('html'),
      $elementToFocus: $('body')
    });

    cache.$mobileNavContainer.one(
      'TransitionEnd.navToggle webkitTransitionEnd.navToggle transitionend.navToggle oTransitionEnd.navToggle',
      function() {
        slate.a11y.removeTrapFocus({
          $container: cache.$mobileNav,
          namespace: 'navFocus'
        });
      }
    );

    cache.$mobileNavToggle
      .addClass(classes.mobileNavOpenIcon)
      .removeClass(classes.mobileNavCloseIcon)
      .attr('aria-expanded', false)
      .focus();

    $(window).off('keyup.mobileNav');

    scrollTo(0, 0);
  }

These are default functions from fresh theme installation.

 

Best,
Evita

 

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Excursionist
27 2 2
Evita,
Thanks for this. I don't see any differences in the code you provided and
the code on my site. When I inspect the menu and click on it, this element
lights up pink:


aria-expanded="false"

and



Does that mean anything to you?
1 Like
Shopify Expert
665 170 201

Yes I saw that class names should change from mobile-nav--open to mobile-nav--close.

On The Map Marketing | Developing custom Shopify Sites & Apps is our thing

- Install our latest app Accessibly - Makes your store accessible for everyone, helps to avoid fines
- Inc 5000 | Shopify Parners | 20+ stores launched | 300+ active clients
- Need help with your Shopify store? Reach out to us!
1 Like
Highlighted
Excursionist
27 2 2

I'm sorry.  I don't know what that means.  I also just saw that my code didn't paste properly from my email.  This is the code that lights up pink.

<button type="button" class="btn--link site-header__icon site-header__menu js-mobile-nav-toggle mobile-nav--open" aria-controls="MobileNav" aria-expanded="false" 

and

<nav class="mobile-nav-wrapper medium-up--hide is-transitioning"
0 Likes