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!!
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
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