How to hide menu toggle button on mobile in Elementor


If we use Elementor nav menu widget and check the site on mobile, Elementor turns the menu to a Hamburger toggle button.
But sometimes we use multiple Nav menu widget in the site. Its very annoying to have multiple Hamburger menu, specially on footer.

In this tutorial We will learn how to can Disable that hamburger menu button and show the actual button.

We have to give a class name to that menu. Lets say it is “menu_mobile “.
Now open the CSS editor and lets add some CSS.

As we only need to show it on mobile so we will target only the mobile.

@media screen and (max-width:767px){
.menu_mobile .elementor-menu-toggle{ display:none}
 .menu_mobile .elementor-nav-menu--main{ display:block}

You can see there, we have used a media query and set the max-width to 767px so these codes only works on device smaller that 767px.

The we have to target the “elementor-menu-toggle” class and hide it by setting “display:none”.
Then we need to show the main menu by showing “elementor-nav-menu–main” div.
Thats it !!!

Share this post

Share on facebook
Share on twitter
Share on linkedin
Share on pinterest

Leave a Reply

Close Menu
This website uses cookies to provide you with the best service. By using our website, you agree to use the cookie. Learn More