Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 165
Deprecated: Use of "parent" in callables is deprecated in /home/292293.cloudwaysapps.com/ejxumdpjev/public_html/wp-content/plugins/divi-module-code-snippet/divi-shim/class_DBCS_Builder_Module_3_1.php on line 158
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 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: Do It With Divi Responsive Helper!
Why work so hard? You can do this easily with a setting in our Divi Responsive Helper plugin!
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.
Where To Paste The CSS Code
1. Divi Assistant
If you are using our Divi Assistant plugin, simply paste the code in the CSS tab in the custom code window in the Divi Visual Builder.
2. Child Theme
If you are using a child theme, paste this code into the style.css file. If you don't have a child theme, you can generate a child theme directly on your site or download our free child theme.
3. Divi Theme Options Integration
Otherwise, paste this code in your Divi>Theme Options>Custom CSS code box.
If you need help understanding where to paste the code, please check out our complete guide about where to add custom code In Divi.
/*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!
Do It With A Setting!
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!
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!
I’ll really need your help on this. How did you manage to get it done please?
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://wordpress-292293-1617718.cloudwaysapps.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://wordpress-292293-1617718.cloudwaysapps.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://wordpress-292293-1617718.cloudwaysapps.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://wordpress-292293-1617718.cloudwaysapps.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://wordpress-292293-1617718.cloudwaysapps.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://wordpress-292293-1617718.cloudwaysapps.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 ! 🙂
Hi Nelson/Team
Thanks for the awesome tutorials. Building on this tutorial, how would I do the following:
Example website: https://www.momentum.co.za/momentum/home
1. Align the hamburger menu LEFT on both desktop and mobile?
2. Design the actual hamburger icon to have a background color and the lines (of the menu icon) to be white?
3. If possible would you also know how to get that LOGO effect on scroll? (on the example website) As you scroll down the full logo shifts to just the small logo..
Thanks a mil.
Hi Zaid,
We only answer questions related to something in our tutorial. If you need custom work you would need to hire a developer.
Hi Nelson
Pretty sure the first question is very much related to the tutorial. Not to worry. Keep well
Actually Ziad, no that has nothing to do with this tutorial, but you can surely check our other tutorial on the topic: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-move-the-divi-menu-to-the-left-and-logo-to-the-right/
Perfect. thanks
Your solution for this was so much simpler than the convoluted one Elegant Themes provides with jquery (that didn’t work). Thanks.
Glad you like it! 🙂
Excellent tutorial, thanks.
I would like to know how I can change the menu icon for another.
We have another tutorial on that: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-change-the-divi-menu-module-hamburger-icon-to-an-x-when-open/
when I use the responsive feature the hamburger menu does not appear, nor does it appear with the code.
What do you mean about a responsive feature?
Hi how do i make this hamburger have a X to close it again ? it now only shows hamburger
Hi Ryan!
Please add the following code to change the hamburger icon to X icon to close:
.pa-hamburger-menu .mobile_nav.opened .mobile_menu_bar:before{
content: ‘\4d’ !important;
}
Let me know how it goes.
Hi Nelson!! Incredibly helpful tutorial as always. Question–when the dropdown menu color is white, there appear to be light grey dividers between the menu items. Any way to make them go away or change the color at least? Also, the dividers and text (in the dropdown menu) appear to be shifted slightly to the right, so the dividers don’t reach all the way across and stop short to the left of the dropdown menu and making the text slightly off center. Is there also a way to fix this?
Thank you so much in advance!!
Hi Alexan!
Please add the following code to remove the bottom border:
.pa-hamburger-menu .et_mobile_menu li a{
border-bottom: none;
}
For checking the text alignment in the menu, can you please share the URL of the page?
This is just what I was looking for – almost. I have the menu layout & logo set for left align, but I’d like the hamburger menu to be right aligned.
Try setting the text alignment to right.
Sorry Nelson – I may be asking something that was in this string of comments but I am a bit lost.
I am trying to set up a global menu that has (1) a custom menu module for desktop and (2) a custom menu for tablet/mobile. I was able to make the desktop menu snap to hamburger at the set 1400px point (for testing) but what I found was that their was an interim hamburger menu that is showing up between 1400px to 981px. It appears that it is the menu that is set in the desktop menu module for this middle area but I need the menu module created for the tablet/mobile to pick up at the 1400px point. I hope that makes sense.
My global menu has a section with three modules in it – one menu module entitled “Desktop Menu” (css class: header-v1-main-menu hmm-v3-menu), one menu module entitled “Menu tablet and mobile” (with a css class: hmm-v2-menu) and one code module that takes care of all the drop downs you will see when the menu is showing desktop (larger than 1400px)
I assume I have to add the menu class for the css that you supplied so that when the desktop module snaps to hamburger it picks up the tablet/mobile module but I know I am missing something here. This is the code I pulled from your article and put at the bottom in the main setting css area:
@media only screen and (max-width: 1400px) {
.et_pb_menu .et_pb_menu__menu {
display: none;
}
.et_mobile_nav_menu {
display: block;
}
}
Any help modifying this to make it work would be greatly appreciated.
Hi Chris!
It seems that some other CSS codes are overriding the one added by you. Can you share the URL of the page to investigate further?
Hello. Thank you for this tutorial. I wanted a Hamburger Menu on the Left that when you click flies out to the right (horizontal), instead of vertical. Cant find a tutorial on it, any suggestions?
Hi Zoe!
In that case, you can try following the fullscreen menu guide: https://wordpress-292293-1617718.cloudwaysapps.com/how-to-create-a-fullscreen-overlay-menu-with-the-divi-menu-module/
Hope it helps!