Create a Custom Mobile Menu Drop Down In Elementor Pro

Facebook
Twitter
Reddit
WhatsApp

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> 
				
			
Subscribe
Notify of
0 Comments
Inline Feedbacks
View all comments

More to explorer

How To Make a Hover Card Like a PRO in Elementor

https://youtu.be/pja-7Sfn8WI CSS selector .card-content{ height: 56%; margin-bottom: -134px; transition: all 0.5s ease; } selector .card-wrapper:hover .card-content{ margin-bottom: 0px; height: 100%; } selector

Elementor Button Border Gradient Tutorial

https://youtu.be/I9am2K_yopc Border Gradient Button CSS selector .elementor-button{ position: relative; overflow: hidden; z-index: 1; margin-bottom: -15px } selector .elementor-button:before{ content: ”; position: absolute;

0
Would love your thoughts, please comment.x
()
x

45 Minute Wordpress Support

Get your Wordpress questions answered and your Wordpress issues resolved.