submenu sticky on mobile

Hi,
Try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (max-width: 767px) {
.responsive #top #wrap_all #sub_menu1 .container {
    width: 100%;
    max-width: 100%;
}
#av-custom-submenu-1 span {
	font-size: 12px;
}
#top #av-custom-submenu-1.av-subnav-menu > li > a {
    padding: 0px 5px 0px 5px;
}
#top #sub_menu1 .av-submenu-pos-right {
    text-align: center;
}
.sticky-top {
	position:fixed!important;
	top:0!important;
	z-index:600!important;
}
}

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

function custom_sticky_sub_menu() { ?>
  <script>
(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', 'custom_sticky_sub_menu', 99 );

Then clear your caching plugin and browser, please note that testing with iPads & iPhones can be hard to clear the cache, often you need to also clear the history to fully purge the cache, following these steps for Safari and note Step 4 where you will Clear the History.
In my test with makes the sub-menu sticky on mobile ans reduces the size of the menu itme so they fit better, feel free to adjust to suit.
Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.

Best regards,
Mike

Hi,

Thank you for the screenshot.

We don’t get any errors when we add the code in the functions.php file. Please revert the changes, re-open the functions.php file or refresh the dashboard, then make sure to copy the code directly from forum before pasting it to the functions.php file.

function custom_sticky_sub_menu()
{ ?>
    <script>
  (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', 'custom_sticky_sub_menu', 99 );

Best regards,
Ismael

Hi,

@Guenni007: Yes, the script should work regardless of the burger menu settings. You may need to add a few more conditions if you need to prevent the submenu from sticking when the burger menu overlay is active.

function ava_custom_sticky_sub_menu()
{ ?>
    <script>
  (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' || $('.av-burger-overlay').is(':visible')) {
                $stickyTop.removeClass('sticky-top');
            }
        }, {
            offset: '0%'
        });
    }
    })(jQuery);
  </script>
    <?php
}
add_action( 'wp_footer', 'ava_custom_sticky_sub_menu', 99 );

Best regards,
Ismael

Hi,
If it is not working at the end of your child theme functions.php, but is working at the top of your child theme functions.php, this could be due to an error in your child theme functions.php, perhaps we should take a look, please include an admin login and FTP access in the Private Content area so we can be of more assistance.

Best regards,
Mike