How To Disable The Hamburger Menu (Menu Module)?

Written by the Divi Engine Documentation Team

Introduction

Follow this step to disable the hamburger menu.

Step 1: Add A CSS Class

The first step is to add a CSS Class to the menu module so we can target this specific menu module and not affect any other menu modules on the website. Please open the Menu Module Settings > Advanced > CSS ID & Classes and then add the CSS Class lwp-hide-mobile-menu to it.

Step 2: Add CSS Code

Next, go to your child theme style.css file or Divi > Theme Options > Custom CSS and add the following CSS. This will disable the hamburger menu on both tablets and phones and show the default desktop menu.

.lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu { display: flex!important; } .lwp-hide-mobile-menu .et_mobile_nav_menu { display: none; }

If you want to disable the hamburger menu only on tablets then you can use the code below. In this code, we are only targeting the tablet resolution so phones will show the hamburger menu.

@media (min-width: 768px) and (max-width: 980px) { .lwp-hide-mobile-menu.et_pb_menu .et_pb_menu__menu,.lwp-hide-mobile-menu.et_pb_fullwidth_menu .et_pb_menu__menu { display: flex!important; } .lwp-hide-mobile-menu .et_mobile_nav_menu { display: none; } }

More Support?

Please email us at [email protected] if you are unable to get Divi Mega Menu working.