Langsung ke konten utama

Membuat menu tidak responsive di DIVI / Disable Mobile Menu (Hamburger Menu) in Menu Module Divi Theme

 In this article I will share the steps to hide or disable the hamburger menu in the menu module in the Divi theme.

By default the menu will turn into a dropdown mobile menu with the hamburger icon. The hamburger icon when clicked will open the dropdown and show the menu items.

The menu module turns into the hamburger menu on Tablets and Phones by default. Which means under 980px you will see the dropdown mobile menu instead of the regular menu items that you see on desktops.

If you want to show the desktop menu even on smaller screens then we can accomplish this with a short piece of css code.

Add CSS Class to Disable Hamburger Menu in Menu Module

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.

If you are not sure where to add the CSS Class then here is a screenshot to help you.


Add CSS Code to Hide Hamburger Menu in Theme Options

Next go to your Dashboard > Divi > Theme Options > Custom CSS and add the below code in it. 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;

}


===========







Komentar

Postingan populer dari blog ini

Quick Tip: Remove Space between Footer and Post in Divi

 Divi has a weird quirk where any blog post that is published has a space between the post and the footer. Luckily there is a quick fix. Click on the gear icon in the Divi Visual Builder. In the CSS section of the post editor, add the following code snippet and save. .single .et_pb_post {  margin-bottom: 0;  padding-bottom: 0; } #left-area {  padding-bottom: 0 !important; } If it is saved correctly, you should no longer see a space between the post and footer.

Membuat background colom atau section yang saat di hover zoom

https://www.youtube.com/watch?v=EMud8mbVZ50 Pada colom yang ada backgroundnya, masuk ke ADVANCE - CUSTOM CSS - MAIN ELEMENT: background-size:100%; transition: all 0.5s ease; dan di HOVER: background-size:130%; Start write the next paragraph here