How to show Divi Mega Menu on desktop only

We have had a few customers wanting to show the Mega Menus on desktop only. By default, Divi Mega Menu shows it on desktop and mobile. This tutorial will show you how to hide it on mobile.

Step 1:

Create your Divi Mega Menu in the Divi Engine settings as usual. Here is a link to our documentation on how to set this up.

Step 2:

Create two menu items and assign the mega menu custom identifier (CSS class) to the one you want to show for desktop. Assign another custom class to the other that you want to show for mobile. I have added the class “mobile-only” – but it can be anything. See image below. I have labeled the menu items “Mega Menu Desktop” and “Menu Mobile” to be clear on what is happening.

If you go to the front end of your website you will still see both menus like below

Step 3:

We are doing to add some custom CSS to hide the mobile menu on desktop and hide the desktop on mobile. Below is the CSS and my comments on what each line does.
[css]
.mobile-only {display:none !important;} /*this hides the mobile menu on desktop */

@media all and (max-width: 980px) { /* You can change the breakpoint from 980px to when your mobile menu comes in */
.mobile-only {display:block !important;} /*shows mobile menu on mobile */
.test {display:none !important;} /* hides desktop menu on mobile, make sure you change the word test to be the custom css class you gave for your mega menu */
}
[/css]
Below is how it looks on the frontend now.

And that’s it! Any questions just comment below or get in touch and we will be happy to help 😀

0 Comments

Submit a Comment Cancel reply

You must be logged in to post a comment.

Explore more from Divi Engine

Divi Form Builder

From simple contact forms to complex frontend post or product creation, Divi Form Builder has you covered.

Find out more

Divi Machine

Build complex websites that displays dynamic fields you can filter, search and so much more with the Divi Builder.

Find out more

Divi BodyCommerce

A versatile toolkit for developers using Divi and WooCommerce together, designed to boost your e-commerce site and achieve greater conversion rates.

Find out more

Divi Handoff

Let clients update content without touching the Divi Builder. Design layouts once, connect them to Flexible Content fields, and give editors simple forms for text, images, and sections.

Find out more

Divi Loop Extender

Unlock the Full Power of Divi 5 Loop Builder Add advanced sorting, filtering, and relationship logic right inside the Visual Builder.

Find out more

Divi Membership

Monetize your Divi websites by transforming them into membership sites with seamless subscription management, user-friendly interfaces, and customizable membership tiers.

Find out more

Divi Machine Accounts

Build an account area for your customers to edit their details, access wishlist, submitted posts and more. *Note: Requires Divi Machine installed and active