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.