Code by Day | Explore By Weekend

How To Show A Divi Mobile Hamburger Menu On Desktop Tutorial by Pee Aye Creative

How To Show A Divi Hamburger Menu on Desktop

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.

/*show hamburger menu on desktop*/

@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
    display: none;
}

.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
}
} 

You may also need to remove the bullet icons that now show in the dropdown list items. You can remove those with this snippet:

.et_pb_menu .et_mobile_nav_menu li {
    list-style-type: none;
}
 

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 hamburger menu on desktop for specific menu module*/

@media (min-width: 980px) {
.pa-hamburger-menu .et_pb_menu__menu {
    display: none;
}

.pa-hamburger-menu .et_mobile_nav_menu {
    display: flex;
    float: none;
    margin: 0 6px;
    align-items: center;
}
} 

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!

How To Show An Open Divi Menu On Mobile Instead Of The Hamburger Icon Tutorial by Pee Aye Creative
77
Last updated Jan 13, 2021 @ 5:46 pm

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.
Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Leave A Response!

Subscribe
Notify of
guest
119 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Vera Schafer
1 year ago

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

Chris Marsh
1 year ago

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! 🙂

Marco
Marco
1 year ago

Hi, very useful, but I have an issue with the mobile burger menu on desktop.

It work very well, but near the link (ex: home, about, and the other links) it show a bullet point, just linke it is an

    . How can I cancel that bullet point?

    Thank you

Rafa
1 year ago

Hi Nelson,
Thanks for this useful piece of css!
Just I have a small problem because you still see the bullets…

Any idea?
Many thanks

Stephen
1 year ago

Great thanks! How do I change a) color of the menu and b) make it bigger – It looks very small on desktop (and without enlarging it on mobile)

Thanks again for the info 🙂

Stephen

Thanks a lot, will definitely check it out – Not sure why I didn’t think of that :-0

Stephen
Reply to  Stephen
1 year ago

Hi,
Once again, thanks for the info. It looks great on mobile but on desktop there is a blue “bullet point” appearing before each menu item (which doesn’t look good at all) These don’t show on mobile at. How can I get rid of these bullet points on desktop that it looks the same as it does on mobile (i.e. no bullet points)
Thanks in advance,
Stephen

P.S. I posted the website URL below

Raghunath
Raghunath
1 year ago

Has something changed in the last few updates? I’m trying this with the divi menu module and it doesn’t seem to work.

Raghunath
Raghunath

sure it’s https://aramse.coffee
I basically want that menu displayed only when the hamburger icon is clicked.

Jan
Jan
1 year ago

Hi! I tried to add the snippet to show hamburger icon menu on my site but seems it is not working and showing the same regular menu. Can you help? https://thefitnesskitchenme.com/thevault/

Amin
Amin
1 year ago

Hi Nelson,

Thank you for this great tutorial, would you be able to show us how to create a full-page fly-in menu in a future video?

Segun
Segun
11 months ago

Is it possible to make the menu displayed once mice hover the hamburger? If yes, can you please help out. Thanks.

Jon Mynette
Jon Mynette
11 months ago

Hey Nelson. Great tip. I have two menus, one smaller on the top bar of the main header and one being the main nav. Could I change the smaller menu to show the desktop version on phone and leave the main nav to show the hamburger?
Thanks in advance!

Marc W Rabinowitz
11 months ago

How would I remove the hamburger from the footer menu and keep the hamburger for the top menu?

Marc W Rabinowitz

Perfect. Thank you so much!

Ro Al
Ro Al
10 months ago

Hi, thanks for the post.
I use the first code:

/*show hamburger menu on desktop*/

@media (min-width: 980px) {
.et_pb_menu .et_pb_menu__menu, .et_pb_fullwidth_menu .et_pb_menu__menu {
display: none;
}

.et_pb_menu .et_mobile_nav_menu, .et_pb_fullwidth_menu .et_mobile_nav_menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}

Working but only in homepage, when I go to another page I see a regular menu. What can I do?
Thanks for your help.

Gord
10 months ago

I needed to show a desktop and mobile menu on mobile so I used your code for showing both types of menus on desktop and switched some things to work on mobile. Here is what I did:

@media (max-width: 980px) {
.pa-desktop-menu .et_mobile_nav_menu {
display: none;
}

.pa-desktop-menu .et_pb_menu__menu {
display: flex;
float: none;
margin: 0 6px;
align-items: center;
}
}

I worked so I imagine this is the way to do it.

Thanks for the super helpful tutorials.

Gord

Sarah Cauble
Sarah Cauble
Reply to  Gord
9 months ago

Thanks for this, Gord! Your code snippet worked for me too. I needed to have two menus and only have one show the desktop version on mobile.

Mayuresh
Mayuresh
10 months ago

Hello Nelson,

Can you make a video on how to add a sidebar menu on mobile just like the way you added on this website? (Menu items shows up from right side)

Sam
Sam
9 months ago

Thank you for this tutorial, Nelson!

I was wondering if this code could be used on a theme builder to generate the same top navigation layout as the one on https://wearegoodinbread.com/

Looking forward to your response.

Armando
Armando
9 months ago

Hi Nelson, do you know how to apply the changes only in one specific page? Thanks so much!

Armando
Armando
Reply to  Armando
9 months ago

I figured it out, ignore that!

lisa
lisa

Hi can you expand on this a little. Trying to do this just for one or two pages myself.. Thanks in advance

Stephen
Stephen
9 months ago

Hi Nelson Great tutorial. I have another nuance I would LOVE to code for but I can’t get it right & would it would be great if you could help me out! Essentially, I wish to switch from the ‘Default’ Divi Header Style at the breakpoint which is best for me (happens to be 1045px) to ‘Centered’ Divi Header Style for tablets and then to ‘Hamburger’ for a mobiles (I don’t know that breakpoint measurements yet, but say, for the sake of example 800px). Unless I am mistaken, I should be able to keep a ‘proper’ menu for smaller devices… Read more »

Stephen
Stephen

Hi Nelson

Thanks for your super-quick reply—amazing.

I am still having trouble, mainly as I am a rank amateur (a photographer really, not a web-designer.

I went to your other post (which I hadn’t seen) but unfortunately I still don’t seem to be able to achieve what I am after.

My attempt at the CSS to get the  ‘Centered’ Divi Header below 1045px is as follows:

@media only screen and (max-width: 1045px) {
 .et_pb_menu .et_header_style_centered {
     display: block; 
  }
 .et_mobile_nav_menu {
    display: none
  }
}

Any ideas what I am doing wrong??

Thank you again

Stephen

Stephen Hyde
Stephen Hyde
Reply to  Stephen
9 months ago

BTW All your hard work here on the forums pays off. I have through this discovered your  Divi Responsive Helper and purchased it. Can’t wait to streamline my workflow. It looks awesome! (one comment is that it wasn’t easy to find a ‘Purchase’ option – it isn’t on the page I have linked to!

Macy Ryan
9 months ago

How would you make the menu items only appear if the hamburger icon is clicked?

Macy Ryan

Apologies – I am trying to insert the code in my link below into my Navbar on WordPress and have it inline with my logo. I use the Divi theme as well.. I guess my question would be is the code in my link below accomplishable with the code you provided that i can insert into my divi theme?

https://codepen.io/macyboyett/pen/vYLRRgb
website: http://www.blucorepartners.com

KB James
KB James
9 months ago

how can i use the hamburger menu on the secondary top menu bar?

diana
diana
8 months ago

I have a client site that needs a menu redo and I want to use the theme builder. However there is a secondary menu and a main menu. How do you combine the two for phone view like what happens in the default menu?

Diana S Nashif
Diana S Nashif

Thank you Nelson, I thought that would be the case. A tutorial would be awesome. You are my go to guy for things I need to do on my sites!

Mike
Mike
8 months ago

Hey – amazing site and wealth of information!! So happy I landed upon it. Now bookmarked and on the top of my divi resources.

Is there a way to make the hamburger menu open to full screen (without using fullwidth menu).

Our site has two menus and a logo in the middle, So when opening hamburger menu to open it on full page ?

Besides that kudos on the knowledge you are sharing !!

Patricia Meyer
8 months ago

No matter what I’ve tried, I can’t get the code for the Divi Menu Module to work. I’m trying to use it while using the Divi Theme Builder and building a custom header. The header is currently not available.

Diggi
Diggi
8 months ago

Hi, thanks for the good work and inspiration!!! I used the code and it works well, but is limited to 980px. Even if I change it to e.g. 1920px (I want to have the hamburger icon on full screen) it’s not working. Any idea how to achieve this?

Diggi
Diggi

Hi, thanks! It’s exactly what I wanted. Is 1920px enough to have it on larger screens or should I set it to more than 2000px?

Dillon Sherlock
Dillon Sherlock
7 months ago

Is this process different when building out the menus in the theme builder? I’ve got it to work when building it out on a page, but it won’t work in the theme builder for some reason.

Dillon Sherlock
Dillon Sherlock

Sorry, should’ve clarified. I’m trying to display two menus. One regular menu, with a hamburger menu to the right displaying a few more items. I’ve followed your tutorial, and it works as it should when editing a page. When I try to replicate the process in the theme builder, it’s not working properly.

tépè
7 months ago

Bonjour et bravo pour votre tuto cela m’a été très utile. Je rencontre quand même un problème, le sous-menu (texte en blanc) reste ouvert en permanence 🙁 Y’a-t-il un moyen qu’il ne s’ouvre qu’au clic sur le texte “Toutes les Robes de Cœur” ? Avec un petit signe “+” à droite du texte ! Merci par avance Le site en question : https://newsite.robedecoeur.fr ———————– Hello and congratulations for your tutorial, it was very useful to me. I still encounter a problem, the sub-menu (white text) remains open permanently 🙁 Is there a way that it only opens when you click… Read more »

Capture d’écran 2020-08-18 à 14.36.48.png
tépè

Thank you,
does the problem come from the fact that this menu is built in the Theme Builder,

Bill Patterson
7 months ago

Just what I was looking for. I have a client who does not like the full width menu to wrap when he makes the browser window narrower but not as narrow to flip to the hamburger menu. How to keep it from wrapping and just let it run off the right side of the window?

Nikki Fryn
Nikki Fryn
7 months ago

Another wonderful tutorial that solved my menu on mobile need!!

Thank you, Nelson. Your tutorials are invaluable!

cordi
cordi
6 months ago

Thank you for this great tutorial. Please help me, I’m getting crazy…. I want to have the hamburger icon in black….tried all the settings and css, but it stay in this custom blue…..

Tried even this, but nothing is working:

.mobile_menu_bar {
   color: #000000 !important;
}

cordi
cordi

Perfect 🙂 Thank you, that works!

Cato
6 months ago

Hi Nelson, thanks for the tutorial. I’ve tried it but it does not work for so not sure where I’m going wrong. I’ve added a FW menu via the Divi Builder in a FW section and then added your code in the advanced/CSS bit but the menu does not change from regular to hamburger as per the below.

http://anafranchini.com/

I’ve inspected the element and I can’t see anything wrong with the element values. I am not using the Divi theme though, just the editor. Any idea what I might be missing?

Cato Rolea

Hi Nelson, I tried with the regular ‘new’ Menu module as well but it’s still the same. Any other idea why this is not working in my case?

Cato Rolea

Well it’s the same link I used in my initial comment: http://anafranchini.com/
Thanks.

GoldieR
GoldieR
6 months ago

Ive just used this code, and am having trouble styling the dropdown. There are blue dots on the menu items, and the menu is broken by the other normal menu element below.
Any advice to style the dropdown would be much appreciated

Mario
Mario
6 months ago

I don’t see any change using this code. Im building a header and is not creating the hamburguer menu

Jacob
6 months ago

I have another scenario… I want to show the mobile menu only on mobile and the desktop menu on tablet view. So I took your last snippet on this page and changed the media query to:@media (max-width:1325px) and (min-width:981px). But it did not work 🙁
Any suggestions? Maybe a topic for a tutorial.

Steve Smith
5 months ago

This was really useful – thanks!

Elisandro Borges
Elisandro Borges
5 months ago

Wow, Nelson! That is awesome! Thanks a lot!

Dennis
Dennis
4 months ago

Hi,

This is fantastic, thank you so much for this!

I have a wierd question;)

I want to have two menu’s and one have to change to a hamburger menu when it goes to the mobile version and the other one don’t. Is this possible?

Remco Bijl
4 months ago

Hi, great tutorial, but where I’m looking for is a hamburger menu in the top right of heads and when click on it the menu wil appear in the center of the header instead of the right side slide in. Is that a option?

Brad Watts
Brad Watts
4 months ago

Thank you! Works perfectly. How can I customize the hamburger color on desktop?

Erika
Erika
4 months ago

Hello, very nice tutorial’s

I tried to additional play a bit with 3 menu modules (3colom row) in a custom global header.
Top Left | Top Middle | Top Right

So, the result is that the page will have 3 Hamburgers. The goal is to force 1
Hamburger, among each other 🙂

The question is, how to get control through CSS to each of the Hamburger. When debugging
I see that the class et.mobile_menu got ul id’s e.g. mobile_menu1, mobile_menu2 and mobile_menu3.

So the Burger should be shown only in the Top Middle.

Do you have a hint?

Erika

Henry
Henry
3 months ago

Very helpful, thank you! Would it be possible to configure the Divi menu to work like the one here?
https://www.conradarchitects.com/

  • Dropdown menu items are side by side and drop down from the top of the page
  • Hamburger menu is fixed to the top of the page
Henry
Henry

Thanks for the reply. Just taking the fixed question for now. Why would you need two menus to make one fixed?

Maria Lindgren
Maria Lindgren
3 months ago

Thanks for this tutorial. I have finally got a hamburger menu that I have wanted for a long time. The change I do not get right is the color of the hamburger menu. It is white and I want it black. Tried all color settings in menu settings but it does not work. Do you have any suggestions?

Last edited 3 months ago by Maria Lindgren
Joe Fawcett
Joe Fawcett
2 months ago

Is there any way to stop the menu moving around the screen on different resolutions

Thao
Thao
1 month ago

Thank you for the tutorial! I added a text before the hamburger menu (under class: pa-hamburger-menu) using ::before. Do you know how I could make that word clickable like the hamburger icon? Thank you

Josh
Josh
1 month ago

This is great, thanks for this.
Any advice on how to fix the dropdown menu (When clicking the new hamburger on desktop) it’s super glitchy when hovering with a mouse.

+ On mobile the dropdown menu loads behind some of the page elements

Richard
Richard
1 month ago

this works great but when I go to the shop page the original nav is back in play rather than the traditional hamburger. Does anyone know how to overcome this?

Jim Jacobs
Jim Jacobs
26 days ago

Hi Nelson, Thanks very much for your Divi Menu Module tutorials! These are helping tremendously. Have you published the tutorial on how to make the desktop hamburger menu show a full-screen or slide-in menu? I can’t tell if I’m not seeing it on the site. This is exactly what my design needs, so it would be wonderful!

Jim Jacobs
Jim Jacobs

OK. Thanks for letting me know. I’ll be patient 😉

Morten Ladefoged Jensen
Morten Ladefoged Jensen
24 days ago

Hi Nelson. Tried to put the snippet “Hamburger Menu on Desktop” into my Child Theme style.css, but it doesn’t seem to be working? Any ideas? I’m using the built-in DIVI menu… not a global header in the Builder.

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Divi Adventure Club Product And Course Membership by Pee Aye Creative

Become A Member!

Gain access to everything we offer!

Learn More

Divi Tutorials On YouTube

Join over 5,600 others and subscribe to our helpful Divi videos!

Visit Our Channel

Recent Posts

Pin It on Pinterest

0

Your Cart