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 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!
FYI: You can do this with a setting directly in the Divi Builder with our popular Divi Responsive Helper plugin! Take a look, it is so easy!
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
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:
.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;
}
}
Make life easier and use the Divi Responsive Helper instead, the ultimate Divi responsive toolkit with awesome features and settings to help make your website look and work great on all devices!
I hope you have enjoyed learning How To Show A Divi Hamburger Menu on Desktop. Please share your thoughts in the comments below. If you find value in this type of post, please subscribe because we have tons of tutorials in progress to be posted!
Subscribe
Each month we send out a roundup email newsletter with the latest tutorials, product updates, helpful resources, and any other industry or personal news. Occasionally we send an extra separate email here and there if we just can’t wait! So that’s what you will get if you subscribe, and you can always unsubscribe at any time if you just can’t take it anymore :)
Nelson is the owner of Pee-Aye Creative in the beautiful state of Pennsylvania. He loves helping small businesses, exploring outdoors, building websites with Divi, and teaching others.
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! 🙂
Hi Stephen, all those settings are there in the Menu Module. For all the settings, you can click on the responsive icon and make the changes for desktop, tablet, or phone.
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
on March 20, 2020 at 9:01 am
Has something changed in the last few updates? I’m trying this with the divi menu module and it doesn’t seem to work.
sure it’s https://aramse.coffee
I basically want that menu displayed only when the hamburger icon is clicked.
Jan
on March 25, 2020 at 11:39 pm
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/
Hi Jan,
this tutorial is for the Menu Module. I see that you are using the default menu instead, so the code is completely different and will not work.
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!
Hi Marc,
Just add a unique CSS class to each. One to target the mobile one, and one to target the desktop one. Kind of like our second feature in this tutorial 😉
Hi Ro,
You’ll have to give us some context. Where are you putting the code, and what header are you using? Default, Theme Builder? Is it different on each page? And I’d also need the link.
hi man, i have the same problem, I put the code in the divi buildr as you have done. but when I click on a product, the product page doesn’t show the burger menu. its just the regular menu. What should I add in this code to make it works in my product page ? :
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:
The answer to your question is yes, the above code can help you to showcase the hamburger icon of the Theme Builder Header on the desktop. To replicate the header of the given URL you just need to create three column row and in the extreme left column add the Menu Module, in the center add the logo image and in the right column add the cart icon. After that use the given code to showcase the hamburger icon at the place of menu items.
Let us know how it goes. 🙂
Armando
on June 26, 2020 at 9:16 pm
Hi Nelson, do you know how to apply the changes only in one specific page? Thanks so much!
Hi Armando,
Sure, any time you want to apply a CSS snippet to a specific module you can just add the CSS class in that particular module. So instead of .et_pb_menu replace that with something of your own and match that by placing it in the Menu settings>Advanced tab>Custom CSS class.
Sure Lisa, this is a common question but hard to explain more. I’m not sure how else I would explain it. Just add a custom class to the module and in the code instead of using the global .et_pb_menu. So yo might replace that with anything like .my-menu-module and then add my-menu-module in the module.
Stephen
on July 6, 2020 at 1:00 pm
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 last longer at smaller widths, as my logo will be displayed above the menu items, not in line, thus freeing up width-space by making the menu area taller instead.
I think the baby I am trying to target is .et_header_style_centered but I may have that wrong and certainly am failing to achieve what I want.
I really hope to hear from you and many thanks in anticipation!
Stephen
(BTW a site which achieves this—nothing to do with me but which I wish to emulate— can be seen here )
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
on July 7, 2020 at 2:46 am
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!
Hey Stephen,
That’s great to hear! Hmm, so you found my docs page first? I never thought of adding a purchase link on my docs page, but I guess I could do that. Just figured that was usually the place existing customers go after the sale.
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?
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?
Hi Diana,
For that you would have to do a workaround, so have three menus in WordPress>Appearance Menus, one for Main Menu, one for Secondary Menu, and one for Mobile Menu. Then hide the Main and Secondary menus on mobile, and hide the Mobile on Desktop. That’s the easiest way. There are some plugins that I believe would do this for you in one menu, like showing and hiding certain menu items on mobile. I’ll look into that and maybe make a tutorial.
Hi Mike,
Thanks for the bookmark, I hope you continue to find my resources helpful! I have been playing around with a fullscreen menu tutorial, it is quite a hack but if I refine it enough I will share it!
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.
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?
All you would need to do is assign the media query to be min-width: 980; and everything above it would apply.
Dillon Sherlock
on August 14, 2020 at 4:12 pm
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.
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.
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 on the text “All the Robes of Heart”? With a small “+” sign on the right of the text!
Okay this is totally unrelated to this tutorial. You are asking about how to collapse submenu items. I believe Elegant Themes has a tutorial on that. I may create one myself as well.
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?
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…..
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.
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?
Hi Canto,
I assume FW must mean Fullwidth, which is the answer. This isn’t about the Fullwidth Menu, and there really isn’t any good reason to use that over the new Menu module.
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
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.
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?
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.
Hi Erika,
I don’t think I understand what you are trying to achieve. You say “force 1 hamburger among each other” do you mean combine them all on mobile? If so that’s not possible, that would be related to the WordPress menus and not really to the Divi menu. If you want to hide two of the menu modules on mobile you can do that in the advanced tab with visibility settings.
Hi Henry,
Anything is always possible. You can certainly add two menus and make one fixed, but as for the dropdown the way it works exactly like that would need custom coded.
Thanks for the reply. Just taking the fixed question for now. Why would you need two menus to make one fixed?
Nelson Lee Miller (aka The Divi Teacher)
on December 18, 2020 at 1:31 pm
Sorry I was just thinking about ways to replicate that, since it is not something out of the box. I’m not sure how to achieve that, would take some time to sort out with code.
Maria Lindgren
on December 17, 2020 at 8:47 am
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?
Hi Maria,
If the setting is not working I would recommend asking Elegant Themes. You can share the link and I can look at the code to see if you have it overridden.
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
Off hand I am not sure, I do have a similar type of tutorial coming at some point for making a fullwidth clickable area but I am not sure how to make the Menu word clickable.
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
Hi Josh,
Not sure about the glitch, but if something is loading behind other things then it sounds like a simple z-index issue. You can compare the z-index in the menu module to the row, or other modules and make the menu a higher number.
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?
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!
Morten Ladefoged Jensen
on March 17, 2021 at 10:15 am
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.
I am afraid that we are not able to replicate the issue on our end as the code is working perfectly fine. Could you please share the URL of your website and tell me what you are trying to achieve so that I could investigate further?
Hi Nelson, good tutorial, work as well in my site. But i have an issue with my category page template in theme builder. I’m using the global header, and the stelys to show a hambuger menu, doesn’t work. Can you help me to resolve this?
a) show the full navigation on desktop
b) show a combination of menu elements + hamburger menu for select menu elements
c) show hamburger menu for mobile
how can i achieve that? the regular menu + hamburger menu code is still turning all of them into hamburger menu.
Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS there to get the results and make sure to read the instructions written with the code. 🙂
Hi Augusto,
I’m not sure what you mean by products, but sometimes Divi has extra CSS classes for the Theme Builder such as .et .el etc. You would need to provide the link for us to help.
In this tutorial I will show you how to align the Divi Blurb body text to the left under the icon or image.
Pin It on Pinterest
{"id":null,"mode":"button","open_style":"in_modal","currency_code":"USD","currency_symbol":"$","currency_type":"decimal","blank_flag_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/blank.gif","flag_sprite_url":"https:\/\/www.peeayecreative.com\/wp-content\/plugins\/tip-jar-wp\/\/assets\/images\/flags\/flags.png","default_amount":500,"top_media_type":"none","featured_image_url":false,"featured_embed":"","header_media":null,"file_download_attachment_data":null,"recurring_options_enabled":true,"recurring_options":{"never":{"selected":true,"after_output":"One time only"},"weekly":{"selected":false,"after_output":"Every week"},"monthly":{"selected":false,"after_output":"Every month"},"yearly":{"selected":false,"after_output":"Every year"}},"strings":{"current_user_email":"","current_user_name":"","link_text":"Leave a tip","complete_payment_button_error_text":"Check info and try again","payment_verb":"Pay","payment_request_label":"Pee-Aye Creative","form_has_an_error":"Please check and fix the errors above","general_server_error":"Something isn't working right at the moment. Please try again.","form_title":"Pee-Aye Creative","form_subtitle":null,"currency_search_text":"Country or Currency here","other_payment_option":"Other payment option","manage_payments_button_text":"Manage your payments","thank_you_message":"Thank you for being a supporter! It is people like you who keep us going week after week!","payment_confirmation_title":"Pee-Aye Creative","receipt_title":"Your Receipt","print_receipt":"Print Receipt","email_receipt":"Email Receipt","email_receipt_sending":"Sending receipt...","email_receipt_success":"Email receipt successfully sent","email_receipt_failed":"Email receipt failed to send. Please try again.","receipt_payee":"Paid to","receipt_statement_descriptor":"This will show up on your statement as","receipt_date":"Date","receipt_transaction_id":"Transaction ID","receipt_transaction_amount":"Amount","refund_payer":"Refund from","login":"Log in to manage your payments","manage_payments":"Manage Payments","transactions_title":"Your Transactions","transaction_title":"Transaction Receipt","transaction_period":"Plan Period","arrangements_title":"Your Plans","arrangement_title":"Manage Plan","arrangement_details":"Plan Details","arrangement_id_title":"Plan ID","arrangement_payment_method_title":"Payment Method","arrangement_amount_title":"Plan Amount","arrangement_renewal_title":"Next renewal date","arrangement_action_cancel":"Cancel Plan","arrangement_action_cant_cancel":"Cancelling is currently not available.","arrangement_action_cancel_double":"Are you sure you'd like to cancel?","arrangement_cancelling":"Cancelling Plan...","arrangement_cancelled":"Plan Cancelled","arrangement_failed_to_cancel":"Failed to cancel plan","back_to_plans":"\u2190 Back to Plans","update_payment_method_verb":"Update","sca_auth_description":"Your have a pending renewal payment which requires authorization.","sca_auth_verb":"Authorize renewal payment","sca_authing_verb":"Authorizing payment","sca_authed_verb":"Payment successfully authorized!","sca_auth_failed":"Unable to authorize! Please try again.","login_button_text":"Log in","login_form_has_an_error":"Please check and fix the errors above","uppercase_search":"Search","lowercase_search":"search","uppercase_page":"Page","lowercase_page":"page","uppercase_items":"Items","lowercase_items":"items","uppercase_per":"Per","lowercase_per":"per","uppercase_of":"Of","lowercase_of":"of","back":"Back to plans","zip_code_placeholder":"Zip\/Postal Code","download_file_button_text":"Download File","input_field_instructions":{"tip_amount":{"placeholder_text":"How much would you like to tip?","initial":{"instruction_type":"normal","instruction_message":"How much would you like to tip? Choose any currency."},"empty":{"instruction_type":"error","instruction_message":"How much would you like to tip? Choose any currency."},"invalid_curency":{"instruction_type":"error","instruction_message":"Please choose a valid currency."}},"recurring":{"placeholder_text":"Recurring","initial":{"instruction_type":"normal","instruction_message":"How often would you like to give this?"},"success":{"instruction_type":"success","instruction_message":"How often would you like to give this?"},"empty":{"instruction_type":"error","instruction_message":"How often would you like to give this?"}},"name":{"placeholder_text":"Name on Credit Card","initial":{"instruction_type":"normal","instruction_message":"Enter the name on your card."},"success":{"instruction_type":"success","instruction_message":"Enter the name on your card."},"empty":{"instruction_type":"error","instruction_message":"Please enter the name on your card."}},"privacy_policy":{"terms_title":"Terms and conditions","terms_body":null,"terms_show_text":"View Terms","terms_hide_text":"Hide Terms","initial":{"instruction_type":"normal","instruction_message":"I agree to the terms."},"unchecked":{"instruction_type":"error","instruction_message":"Please agree to the terms."},"checked":{"instruction_type":"success","instruction_message":"I agree to the terms."}},"email":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email address"},"success":{"instruction_type":"success","instruction_message":"Enter your email address"},"blank":{"instruction_type":"error","instruction_message":"Enter your email address"},"not_an_email_address":{"instruction_type":"error","instruction_message":"Make sure you have entered a valid email address"}},"note_with_tip":{"placeholder_text":"Your note here...","initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"empty":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"not_empty_initial":{"instruction_type":"normal","instruction_message":"Attach a note to your tip (optional)"},"saving":{"instruction_type":"normal","instruction_message":"Saving note..."},"success":{"instruction_type":"success","instruction_message":"Note successfully saved!"},"error":{"instruction_type":"error","instruction_message":"Unable to save note note at this time. Please try again."}},"email_for_login_code":{"placeholder_text":"Your email address","initial":{"instruction_type":"normal","instruction_message":"Enter your email to log in."},"success":{"instruction_type":"success","instruction_message":"Enter your email to log in."},"blank":{"instruction_type":"error","instruction_message":"Enter your email to log in."},"empty":{"instruction_type":"error","instruction_message":"Enter your email to log in."}},"login_code":{"initial":{"instruction_type":"normal","instruction_message":"Check your email and enter the login code."},"success":{"instruction_type":"success","instruction_message":"Check your email and enter the login code."},"blank":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."},"empty":{"instruction_type":"error","instruction_message":"Check your email and enter the login code."}},"stripe_all_in_one":{"initial":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"empty":{"instruction_type":"error","instruction_message":"Enter your credit card details here."},"success":{"instruction_type":"normal","instruction_message":"Enter your credit card details here."},"invalid_number":{"instruction_type":"error","instruction_message":"The card number is not a valid credit card number."},"invalid_expiry_month":{"instruction_type":"error","instruction_message":"The card's expiration month is invalid."},"invalid_expiry_year":{"instruction_type":"error","instruction_message":"The card's expiration year is invalid."},"invalid_cvc":{"instruction_type":"error","instruction_message":"The card's security code is invalid."},"incorrect_number":{"instruction_type":"error","instruction_message":"The card number is incorrect."},"incomplete_number":{"instruction_type":"error","instruction_message":"The card number is incomplete."},"incomplete_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incomplete."},"incomplete_expiry":{"instruction_type":"error","instruction_message":"The card's expiration date is incomplete."},"incomplete_zip":{"instruction_type":"error","instruction_message":"The card's zip code is incomplete."},"expired_card":{"instruction_type":"error","instruction_message":"The card has expired."},"incorrect_cvc":{"instruction_type":"error","instruction_message":"The card's security code is incorrect."},"incorrect_zip":{"instruction_type":"error","instruction_message":"The card's zip code failed validation."},"invalid_expiry_year_past":{"instruction_type":"error","instruction_message":"The card's expiration year is in the past"},"card_declined":{"instruction_type":"error","instruction_message":"The card was declined."},"missing":{"instruction_type":"error","instruction_message":"There is no card on a customer that is being charged."},"processing_error":{"instruction_type":"error","instruction_message":"An error occurred while processing the card."},"invalid_request_error":{"instruction_type":"error","instruction_message":"Unable to process this payment, please try again or use alternative method."},"invalid_sofort_country":{"instruction_type":"error","instruction_message":"The billing country is not accepted by SOFORT. Please try another country."}}}},"fetched_oembed_html":false}
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!
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
Hi Marco,
You can hide those with this:
.et_pb_menu ul {
list-style-type: none!important;
padding: 0 0 ;
}
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
Hi Rafa,
You can hide those bullets with this CSS snippet:
.et_pb_menu ul {
list-style-type: none!important;
padding: 0 0 ;
}
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 🙂
Hi Stephen, all those settings are there in the Menu Module. For all the settings, you can click on the responsive icon and make the changes for desktop, tablet, or phone.
Thanks a lot, will definitely check it out – Not sure why I didn’t think of that :-0
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
Has something changed in the last few updates? I’m trying this with the divi menu module and it doesn’t seem to work.
Can you share the link? It does work 🙂
sure it’s https://aramse.coffee
I basically want that menu displayed only when the hamburger icon is clicked.
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/
Hi Jan,
this tutorial is for the Menu Module. I see that you are using the default menu instead, so the code is completely different and will not work.
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?
Hi Amin,
You’re welcome, glad you like it! Yes, we have one of those in the queue 🙂
Is it possible to make the menu displayed once mice hover the hamburger? If yes, can you please help out. Thanks.
Hi Segun,
It’s a good idea, I don’t have the answer but I’ll mark that down to look into and possibly post about.
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!
Hi Jon, that sounds exactly like #2 in this post 🙂
How would I remove the hamburger from the footer menu and keep the hamburger for the top menu?
Hi Marc,
Just add a unique CSS class to each. One to target the mobile one, and one to target the desktop one. Kind of like our second feature in this tutorial 😉
Perfect. Thank you so much!
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.
Hi Ro,
You’ll have to give us some context. Where are you putting the code, and what header are you using? Default, Theme Builder? Is it different on each page? And I’d also need the link.
hi man, i have the same problem, I put the code in the divi buildr as you have done. but when I click on a product, the product page doesn’t show the burger menu. its just the regular menu. What should I add in this code to make it works in my product page ? :
/*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;
}
}
thanks a lot man
Could you please share the URL of the page for us to investigate further?
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
Hey Gord,
Sounds good! I always like when people take what I post and adapt it too their needs, so good job!
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.
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)
Sure, we might do that after we release our mobile menu customization tutorial.
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.
Hi Sam,
Are you asking if a fullscreen menu can be made with the Menu module?
yes please
Hi there
The answer to your question is yes, the above code can help you to showcase the hamburger icon of the Theme Builder Header on the desktop. To replicate the header of the given URL you just need to create three column row and in the extreme left column add the Menu Module, in the center add the logo image and in the right column add the cart icon. After that use the given code to showcase the hamburger icon at the place of menu items.
Let us know how it goes. 🙂
Hi Nelson, do you know how to apply the changes only in one specific page? Thanks so much!
I figured it out, ignore that!
Hi Armando,
Sure, any time you want to apply a CSS snippet to a specific module you can just add the CSS class in that particular module. So instead of .et_pb_menu replace that with something of your own and match that by placing it in the Menu settings>Advanced tab>Custom CSS class.
Hi can you expand on this a little. Trying to do this just for one or two pages myself.. Thanks in advance
Sure Lisa, this is a common question but hard to explain more. I’m not sure how else I would explain it. Just add a custom class to the module and in the code instead of using the global .et_pb_menu. So yo might replace that with anything like .my-menu-module and then add my-menu-module in the module.
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 last longer at smaller widths, as my logo will be displayed above the menu items, not in line, thus freeing up width-space by making the menu area taller instead.
I think the baby I am trying to target is .et_header_style_centered but I may have that wrong and certainly am failing to achieve what I want.
I really hope to hear from you and many thanks in anticipation!
Stephen
(BTW a site which achieves this—nothing to do with me but which I wish to emulate— can be seen here )
Hi Stephen,
I actually already have a tutorial about changing that breakpoint that you can see here: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ Let me know if this helps or if there is something additional that I am not understanding! 🙂
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
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!
Hey Stephen,
That’s great to hear! Hmm, so you found my docs page first? I never thought of adding a purchase link on my docs page, but I guess I could do that. Just figured that was usually the place existing customers go after the sale.
How would you make the menu items only appear if the hamburger icon is clicked?
Hi Macy, that is how the menu works by default, so I’m not sure what you are asking. Can you ask it again another way?
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
It’s definitely a cool idea. I’ll look into it when I get a chance, but no promises 🙂
how can i use the hamburger menu on the secondary top menu bar?
Hi KB,
This tutorial is for the Menu module, so for that you would need to be using a Theme Builder header instead of the default header.
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?
Hi Diana,
For that you would have to do a workaround, so have three menus in WordPress>Appearance Menus, one for Main Menu, one for Secondary Menu, and one for Mobile Menu. Then hide the Main and Secondary menus on mobile, and hide the Mobile on Desktop. That’s the easiest way. There are some plugins that I believe would do this for you in one menu, like showing and hiding certain menu items on mobile. I’ll look into that and maybe make a tutorial.
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!
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 !!
Hi Mike,
Thanks for the bookmark, I hope you continue to find my resources helpful! I have been playing around with a fullscreen menu tutorial, it is quite a hack but if I refine it enough I will share it!
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.
Hi Patricia,
What do you mean the head is currently not available?
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?
It sounds like you are trying to change the breakpoint of the menu. For that, check out my other post: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/
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?
All you would need to do is assign the media query to be min-width: 980; and everything above it would apply.
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.
Hi Dillon,
What process do you mean?
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.
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 on the text “All the Robes of Heart”? With a small “+” sign on the right of the text!
Thank you in advance
The site in question: https://newsite.robedecoeur.fr
Okay this is totally unrelated to this tutorial. You are asking about how to collapse submenu items. I believe Elegant Themes has a tutorial on that. I may create one myself as well.
Thank you,
does the problem come from the fact that this menu is built in the Theme Builder,
No this is the same for both the default menu and the Menu module.
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?
Hi Bill,
It sounds like maybe you want this tutorial here: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/
Another wonderful tutorial that solved my menu on mobile need!!
Thank you, Nelson. Your tutorials are invaluable!
Thanks Nikki,
I’m so glad you are finding them so valuable! 🙂
I’m so glad you are enjoying them!
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;
}
Hi Cordi,
For that you need to target the .mobile_menu_bar:before
Perfect 🙂 Thank you, that works!
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?
Hi Canto,
I assume FW must mean Fullwidth, which is the answer. This isn’t about the Fullwidth Menu, and there really isn’t any good reason to use that over the new Menu module.
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?
I’m not sure, can you share a link? Otherwise we’re guessing.
Well it’s the same link I used in my initial comment: http://anafranchini.com/
Thanks.
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
Hi there, please search our blog as we have lots of tutorials. Here is the one you want: https://www.peeayecreative.com/how-to-style-and-customize-the-divi-menu-module-dropdown-submenu/
I don’t see any change using this code. Im building a header and is not creating the hamburguer menu
Hi Mario,
I don’t understand, could you explain what isn’t working and share a link?
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.
Hi Jacob,
It actually sounds like all you need is this tutorial: https://www.peeayecreative.com/how-to-change-the-divi-menu-module-responsive-breakpoint/ I think 🙂
This was really useful – thanks!
You’re welcome, Steve!
Wow, Nelson! That is awesome! Thanks a lot!
You’re welcome Elisandro, glad you like it!
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?
Yes, this is covered in the tutorial 🙂
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?
Hi Remco,
Sounds like you want a fullscreen menu, this is not a feature in Divi. I have a tutorial I am trying to perfect and will release if I do!
Thank you! Works perfectly. How can I customize the hamburger color on desktop?
Hi Brad, you can do this in the Menu module design settings.
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
Hi Erika,
I don’t think I understand what you are trying to achieve. You say “force 1 hamburger among each other” do you mean combine them all on mobile? If so that’s not possible, that would be related to the WordPress menus and not really to the Divi menu. If you want to hide two of the menu modules on mobile you can do that in the advanced tab with visibility settings.
Very helpful, thank you! Would it be possible to configure the Divi menu to work like the one here?
https://www.conradarchitects.com/
Hi Henry,
Anything is always possible. You can certainly add two menus and make one fixed, but as for the dropdown the way it works exactly like that would need custom coded.
Thanks for the reply. Just taking the fixed question for now. Why would you need two menus to make one fixed?
Sorry I was just thinking about ways to replicate that, since it is not something out of the box. I’m not sure how to achieve that, would take some time to sort out with code.
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?
Hi Maria,
If the setting is not working I would recommend asking Elegant Themes. You can share the link and I can look at the code to see if you have it overridden.
Is there any way to stop the menu moving around the screen on different resolutions
Hi Joe,
I’m not sure what you mean?
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
Off hand I am not sure, I do have a similar type of tutorial coming at some point for making a fullwidth clickable area but I am not sure how to make the Menu word clickable.
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
Hi Josh,
Not sure about the glitch, but if something is loading behind other things then it sounds like a simple z-index issue. You can compare the z-index in the menu module to the row, or other modules and make the menu a higher number.
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?
We would need to see a link, otherwise it’s an uneducated guess. Try !important maybe?
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!
Not yet, it is not easy. I just have too many to publish!
OK. Thanks for letting me know. I’ll be patient 😉
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.
Unfortunately this tutorial only works for the Menu module.
hey, this is not working for me with the latest divi and wp core. any chance you could update this? thanks for sharing
I am afraid that we are not able to replicate the issue on our end as the code is working perfectly fine. Could you please share the URL of your website and tell me what you are trying to achieve so that I could investigate further?
Hi, Kindly refer to the syntax errors that I’m facing :
Unexpected token
Expected Rbrace
Expected Rbrace error comes when we open the curly bracket to add the CSS properties but forgets to close it. For example:
.selector{
width: 100%;
color: red;
Here the closing curly bracket is missing and it will throw the error: Expected Rbrace
Please make sure that you have opened and closed the curly braces properly.
Let us know how it goes.
Hi Nelson, good tutorial, work as well in my site. But i have an issue with my category page template in theme builder. I’m using the global header, and the stelys to show a hambuger menu, doesn’t work. Can you help me to resolve this?
I’m not sure what you mean by global header and styles not working. Is this related to the content of the tutorial?
Hi, I am trying to do the following:
a) show the full navigation on desktop
b) show a combination of menu elements + hamburger menu for select menu elements
c) show hamburger menu for mobile
how can i achieve that? the regular menu + hamburger menu code is still turning all of them into hamburger menu.
Thanks!
Hi Ray,
I have written the CSS Snippet for you covering all the points that you have provided.
The Snippet: https://www.codepile.net/pile/mPO6Vj2d
Please go to the Divi > Theme Options > Custom CSS Panel and place the CSS there to get the results and make sure to read the instructions written with the code. 🙂
Let me know if that helps.
Great tutorial.
With the hamburger menu on the desktop, my submenu isn’t collapsable like it on mobile.
Any idea?
Have you tried our other tutorial? https://www.peeayecreative.com/how-to-collapse-divi-mobile-menu-submenus/
Hi, I did exact copy paste of css as mentioned in tutorial.
(Tried second option of hamburger menu and regular menu side by side on desktop)
Okay, is there some issue? You are welcome to share the details.
Hi, I did exact copy paste of css as mentioned in tutorial.
(Tried second option of hamburger menu and regular menu side by side on desktop)
But refer to the syntax errors that I’m facing :
Unexpected token
Expected Rbrace
In that case you are not adding the CSS according to the instructions.
I used this The Snippet: https://www.codepile.net/pile/mPO6Vj2d
Unfortunately it shows no optical response. Still looks the same as before.
Hey Rolf,
This is strange as the code works on my end. Could you please share the URL of the website for me to investigate further?
Hi Nelson,
Congratulations for your blog!!
In the products this code does not work for me if in the pages. Could you tell me what code I should add so that it also works in products?
Thanks!!
Hi Augusto,
I’m not sure what you mean by products, but sometimes Divi has extra CSS classes for the Theme Builder such as .et .el etc. You would need to provide the link for us to help.
Hi,
Thanks for the tip, it’s works fine !
I have just an issue with the product page and the category page. The hamburger menu doesn’t show. Do you know why ?
UPDATE: Ok, I found it !
I add !important and it’s work ! 🙂