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.
You may also need to remove the bullet icons that now show in the dropdown list items. You can remove those with this snippet:
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.
Want To Do The Oppposite?
We have a separate tutorial on How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon! This is very helpful and popular for keeping the menu open on mobile. Go check it out!