Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #1362882

    Hey Team

    I am not able to make the full width submenu sticky on mobile.

    I only need the submenu, it is NOT necesary to have the header with burger fixed.

    Thanks in advance!!

    #1362926

    Hey Magdalena,
    Thank for your question, but the full-width submenu element is not designed to be sticky on mobile, in the element settings, the sticky option says that it is ignored on mobile.
    To make the full-width submenu element sticky on mobile please add this custom ID sticky_on_mobile
    2022-08-27_001.jpg
    Then add this css to your Quick CSS:

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

    Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:

    function custom_sticky_submenu_on_mobile_script() { ?>
      <script>
    window.addEventListener('DOMContentLoaded', function() {
    (function($){
      $(function() { 
      	var width = $(window).width();
         var scroll_start = 0;
         var startchange = $('#sticky_on_mobile');
         var offset = startchange.offset();
          if (startchange.length){
          	if (width <= 989) {
         $(document).scroll(function() { 
            scroll_start = $(this).scrollTop();
            if(scroll_start > offset.top) {
              document.getElementById('sticky_on_mobile').classList.add('sticky-top');
             } else {
              document.getElementById('sticky_on_mobile').classList.remove('sticky-top');
             }
         });
          }
          }
      });
    })(jQuery);
    });
    </script>
      <?php
    }
    add_action('wp_footer', 'custom_sticky_submenu_on_mobile_script');

    Then clear your browser cache and check.

    Best regards,
    Mike

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.