CSS
/*Tablet breakpoint*/
@media(max-width:1024px){
/*Mobile nav column */
#nav-container{
display:none;
overflow:hidden;
}
/*Switch nav widget to verticle on mobile */
.elementor-nav-menu--layout-horizontal .elementor-nav-menu {
flex-direction: column !important;
}
/*Make nav widget 100%*/
.nav-menu {
width: 100% !important;
}
/*Make button widget 100%*/
.nav-btn{
width: 100% !important;
}
}
/*Hide bar icon on desktop*/
@media(min-width:1025px){
.nav-icon{
display:none;
}
}
/*Open bar icon */
.nav-icon i:before{
content: url('');
}
/*Close bar icon */
.nav-icon .change-icon:before{
content: url('');
}
jQuery
<script>
// Toggle mobile menu & change icon on click
jQuery(function() {
jQuery('.nav-icon').click(function(){
jQuery('#nav-container').slideToggle(200);
jQuery('.nav-icon i').toggleClass('change-icon');
});
// Close mobile menu on screen size
jQuery(window).on('resize', function(){
let win = jQuery(this);
if(win.width() > 1024){
jQuery('#nav-container').show();
} else {
jQuery('#nav-container').hide();
}
});
});
</script>
