Sticky submenu with burger navigation

Hey jaimemerz,
Thank you for the link to your site I added this snippet to your WP Code plugin and ensured that in the top right corner it was a code type: PHP snippet

then I added this code and saved.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 767) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

I then added a second snippet with this css:

.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}

and now on your page the fullwidth submenu is sticky when it reachs the top, and un-sticks with you scroll back to the top:

Please clear your browser cache and check.
Best regards,
Mike

Hi
I adjusted to this to account for the height of the header on desktop.

function mobile_sub_menu_sticky() { ?>
<script>
window.addEventListener('DOMContentLoaded', function() {
  (function($){
  	var width = $(window).width();
    var $stickyTop = $('#sub_menu1');
    if (width <= 989) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '0%'
    });
    }
	else if (width >= 990) {
    $stickyTop.waypoint(function(direction) {
      if (direction === 'down') {
         $stickyTop.addClass('sticky-top');
      }
      if (direction === 'up') {
         $stickyTop.removeClass('sticky-top');
      }
    }, {
      offset: '187px'
    });
    }
  })(jQuery);
});
</script>
  <?php
}
add_action('wp_footer', 'mobile_sub_menu_sticky');

and the css:

@media only screen and (max-width: 989px) { 
.responsive #top #sub_menu1.av-switch-768.av-submenu-container.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}
}
@media only screen and (min-width: 990px) { 
.responsive #top #sub_menu1.av-submenu-container.sticky-top {
	position:fixed!important;
	top:172px!important;
	z-index:600!important;
}
}

Best regards,
Mike