Fullwidth submenu sticky on mobile

Hi Rasmus,

Great, I’m glad that Victoria could help you out. Please let us know if you should need any further help on the topic or if we can close it.

Best regards,
Rikard

Hi,
This solution is not working for you because your sub-menu is not at the top of your page as in this thread, so you will need some javascript to determine when the menu gets to the top of the page and then make it sticky.
Try adding this code to the end of your child theme functions.php file in Appearance ▸ Editor:

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

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Then this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}

After applying the css, please clear your browser cache and check.

Best regards,
Mike