Show Divi Hamburger Menu On Desktop
I knew that when the Divi Menu module released with Divi 4.0 that it was going to get interesting, and sure enough, it has. We are going to be doing a lot of tutorials and freebies with the Divi Menu module, so be sure to subscribe!
This tutorial will show you at least three different things. It will show you how to add a Divi hamburger menu on a desktop site, how to show a regular menu on a mobile site, and how to show both a regular and a hamburger menu side by side. So I’m sure you can see I am excited to teach you, so let’s get started! Be sure to join The Divi Teacher Facebook group!
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.
What a coincidence! I was looking for a tutorial this morning and here you are. Thank you, Nelson!
That’s awesome Vera, you are welcome! I’m glad I posted it when I did!
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! 🙂
Hey Chris, I’m so glad you found this tutorial! We are in the process of releasing several menu tutorials a week, so keep an eye out for more!