How To Show A Divi Hamburger Menu on Desktop (and Vise-Versa)

This quick Divi tutorial and code snippet will show you how to easily change the Divi Menu module into a hamburger menu on desktop.

Show Divi Hamburger Menu On Desktop

It is becoming more and more popular to have a hamburger menu displayed as your menu on a desktop site. With the new Divi Menu Module, it is easy to display the mobile version of the menu, the hamburger menu, on the desktop site with some CSS code.

So you may ask, what is the code doing? The CSS snippet is simply displaying the existing mobile menu on a wider screen size, and hiding the existing desktop menu on that same screen size. Nothing is being added or deleted, they are simply shown at different screens sizes based on the width designated in the code.

 To show the Divi hamburger menu on desktop, just copy and paste the code snippet below into your Divi>Theme Options> Custom CSS code box and save.

Can I Show Both A Regular Divi Menu AND Hamburger Menu on Desktop?

Why yes, of course! And yes, there are times where this would be needed, and with the new Divi Theme Builder, you can now show both a regular and a hamburger menu on desktop side by side.

How does this work? The trick here is use the same CSS snippet that we used above, but to add a CSS class to it so that we only target one of the two Menu Modules. This will only make the one Divi Menu molule into a collapsed hamburger menu and leave the other untouched.

This time, we created a custom CSS class called “pa-hamburger-menu” which we need to add to the Divi Menu Module. This needs to be added in the advanced tab custom CSS toggle in the CSS class input area.

Show Divi Desktop Menu On Mobile

The first few snippets I’ve shared so far seemed reasonable, but this last one may be more of a specialty request. I was recently asked how to keep the Divi Menu from changing to a hamburger icon on phone. At first I thought it was silly, but I noticed he had three menu items, and I could see value in it. So here it is, this little CSS code snippet will show the Divi desktop Menu Module on tablet and phone without changing to the hamburger menu icon.

Like always, copy the snippet below and past it into your Divi>Theme Options>Custom CSS box.

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

Nelson is the owner of Pee-Aye Creative Co in the beautiful state of Pennsylvania. He loves helping small businesses, exploring, building websites with Divi, and teaching others.

Join Our NEW Divi Facebook Group!

The Divi Teacher Logo

Related Posts

Leave A Response!

4
Leave a Reply

avatar
  Subscribe  
newest oldest most voted
Notify of
Vera Schafer

What a coincidence! I was looking for a tutorial this morning and here you are. Thank you, Nelson!

Chris Marsh

Hi, thanks so so much for this – I wanted the full menu on the mobile version to match the desktop, not the hamburger and your code worked first time. I had previously tried, read and watched many other articles and none of them worked! 🙂

Shop Our Divi Products!

Child Themes • Plugins • Layouts

Visit The Shop

Divi Tutorials On YouTube

Subscribe to our helpful Divi videos!

Visit Our Channel

Pin It on Pinterest

0

Your Cart