Debut Theme Dropdown Menu Issue

Highlighted
Tourist
6 1 0

I am using the Debut theme. I am having extra spacing issues with the dropdown mobile menu while using the application: Countdown Timer Bar by Hextom , illustrated in the following three images: 

 

1. This is how the Mobile Menu dropdown should look, and does look when the countdown timer bar is not active.

MobileMenuCorrect1.jpg

 

2. This is what the mobile menu bar looks like when I click on the Menu Icon before the countdown bar has loaded: 

MobileMenuCorrect2.jpg

 

 

3. This is what the mobile menu bar looks like when I click on the Menu Icon after the countdown bar has loaded: MobileMenuIncorrect1.jpg

 

 

Is this a z-index issue? Or perhaps an incorrect configuration of the functions openMobileNav() and closeMobileNav()?: 

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

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

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

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

    cache.$mobileNavToggle
      .addClass(classes.mobileNavCloseIcon)
      .removeClass(classes.mobileNavOpenIcon);

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

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

    cache.$mobileNavContainer.css({
      transform: 'translate3d(0, -100%, 0)'
    });
    cache.$pageContainer.removeAttr('style');

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

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

 

Or might it be something else entirely? Any help debugging this issue would be greatly appreciated. I can provide any code sections that might help in realising the problem. Thank you.

0 Likes

Hello ,
Can you please share site URL so I can check the issue.
If you have problem to share in public you can DM me.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Custom Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | Digital Marketing | Site Speed Optimization | Web Development
0 Likes
Tourist
6 1 0

I messaged you. Thank you kindly

0 Likes