Improve The Divi Menu With An X Icon When Opened
A Quick And Easy UX Improvement
We all want to give our website users a good experience, and part of that is adding finishing touches that go beyond the standard offering built into Divi. This quick tutorial and code snippet will dramatically improve user experience as they navigate your Divi website either on tablet or on phone, or even on desktop if you are following one of our menu tutorials on adding the hamburger menu on desktop. Either way, learning how to change the Divi Menu hamburger icon into an X when opened will make a lot of sense to the user.
Join subscribers on our YouTube channel and enjoy other Divi video tutorials!
Changing The Divi Menu Module Icon To An X
This is going to be a short tutorial, but we all love quick and easy, right? Changing the Divi Menu Module hamburger icon into an X is a simple process. By default, the icon is part of a built-in icon font called ETmodules that comes with Divi. The default icon code for the hamburger menu is 61, and we are changing that to the X when the menu is opened, which has an icon code of 4d. So once you press the hamburger menu icon to open the menu, the icon gets replaced and it provides a better user experience.
As usual, copy and paste the following little snippet into the Divi>Theme Options>Custom CSS box.
/*change Divi hamburger menu to X*/
.mobile_nav.opened .mobile_menu_bar:before {
content: '\4d';
}That was about as easy as they come! Just one tiny snippet and the Divi Menu Module now has an X as the open icon!
Closed
Open
EDIT: In the comments, Shawn asked about how to animate this. Unfortunately it’s not possible to “animate” the icons by morphing their sizes, as these are solid icons, not vectors. So one trick that Jimmy suggests is to add a nice rotation effect. Here is the code, it looks pretty nice!
/*rotate the Divi Menu icon on click*/
.mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}
/*rotate the Divi Menu icon on click*/
.mobile_nav.opened .mobile_menu_bar::before {
transition: all .4s ease;
transform: rotate(90deg);
display: block;
}
This is great, is there a similarly simpler way to adjust the time it switches to an X?
Your tutorials are excellent!
Hi Tim,
I’m glad you like my tutorials! Can you explain what you mean about the time? If you are referring to a transition it won’t work, since this is a pseudo-class content.
Hello Nelson! Thank you for the tutorial. I have some issue trying to change the color of the hamburger icon and the X. The default color is blue and I’m trying to make it black. Can you help me? Thank you in advance and for all the great content !
Hi Mara,
Sure, all you have to do is add “color: #000000!important;” to the snippet in this post!
Is there an easy way to add a transition to both?
Hi Bryan, I don’t think you can because the icon is in a pseudo class.
Hi, Thank you so much for this tutorial and all the others.
Is there a way to do this with a button ?
I am not using the divi menu but the divi module Button.
I pasted the hamburger icon in the text of the button and I want it to change to an x when it is open.
Thanks a lot for your help !
Hi there, I’m very confused what you are doing, but it sounds like you would need Jquery or something to change the state first, then change the icon with CSS for each state.
Hi! Congratulations on your tutorials, really great!
I have a problem with the “X” code that doesn’t match ‘4d’
They have been updated?
worked for me 😉
Thanks for this!
Just a quick note. Your snippet needed a \ for me to make it work. Thought I’d share you so you can update your blog.
That’s right. I can confirm that.
Me, too. Thanks, Sean!
Fixed, Divi always strips them out, a know bug in Divi for as long as I can remember unfortunately.
I posted this question on the YouTube comments area of the same tutorial. So I apologize in advance. So here it is.
I’m trying to change the default square hamburger (61) to a round (63).
Short and sweet!
Hi Mike,
So you are asking how to do that? You would just find the icon from ETModules and add that, just like this tutorial just leave out the opened part .mobile_nav.opened
I guess the Icon codes have changed. where do I find the current icon codes? Meaning where can I find the code for each icon
Here is the list. So if you want the solid hamburger icon, it would be content: “\e057”;
Hello Nelson, thanks for the tutorial!
Is there anyway to animate the hamburger toggle icon?
Something like this plugin but for the menu module instead of the standard header menu.
Thanks
Hi Nelson! Thanks for the tutorial! Everything works fine. However I do have a problem with this. I have two menu modules in the same page, and when I add the css code, it changes the two hamburger icons, when instead I only want to modify one. Do you know how can I achieve it?
Hi Fernando,
Any time you want to target specific modules rather than all of them you need to add a custom class. So add a class to the one menu module and match that same class in the snippet.
Hi Nelson, I am trying to do this (changing the icon of one menu while leaving the other as a hamburger).
I’ve added the class
top_bar_menu
to the menu module I want to change, and the code:
.top_bar_menu:before {
content: ‘\e08a’;
}
into Divi > Theme Options > Custon CSS
but it doesn’t work. Am I using the custom class in the right way?
Hi Jemma,
No the CSS is not correct, you would always need the .mobile_menu_bar:before as that is the actual icon class. You can put a custom class before that.
Thank you so much for that! Now it’s working.
hi, how can put animated effect for the icon when change to multiply icon
Hi Shawn,
Since this is simply a content change with a pseudo class, it’s impossible to use any animation.
Shawn, try this CSS.
/* Animate divi mobile icon on click / switch out */
.et_pb_menu_0_tb_header .mobile_nav .mobile_menu_bar:before {
transition: all .4s ease;
transform: rotate(0deg);
display: block;
}
#et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before, .et_pb_module.et_pb_menu .et_mobile_nav_menu .mobile_nav.opened .mobile_menu_bar::before {
transition: all .4s ease;
transform: rotate(90deg);
display: block;
}
This is all the code you need (there’s 2 display: block; statements, one of which is not necessary; there’s also 2 transition statements, one of which is not necessary, etc.):
.mobile_menu_bar::before {
display: block;
transition: all .4s ease;
}
.mobile_nav.opened .mobile_menu_bar::before {
content: “M”;
transform: rotate(90deg);
}
But thanks for this great suggestion Jimmy, it works like a charm!
Great tip. Just added.
Sounds good!
Hi Nelson, I’m using the fullscreen hamburger option which, when clicked, overlays the screen with a black layer and has the close cross in the top right corner. I cannot get the hamburger to rotate and become the cross when open. Any ideas how that can be done with this menu? Also, the cross is annoyingly in a different position to the hamburger icon?
Could you please share the URL of the website where the Menu is placed for us to investigate further?
Hi! For me “4” was not working to display the X icon. I had to use “\4d”
Thanks!!!
Anna
Always great tutorials for the Divi theme, thank you!
Just one thing, in the code for changing the hamburger menu to the X icon, it states to use “content: ‘d’;”, but that just adds dots before the hamburger icon. As you show in the video, it should be: “content: ‘\4d’; ”
Cheers!
Hey Louise,
We appreciate your feedback but in the guide it is stated as \4d for the cross sign so is there anything we are missing out here?
Great tutorial but I think you have to put in “\4d” for the content on .mobile_nav.opened .mobile_menu_bar:before instead of just “d” to show the X
Thanks John, yes we do have it correctly…
Dear Nelson,
Great help and tutorials you have there, just awful! Thanks.
Is it possible to close the open Hamburger menu, if a user scroll on the page itself. In my case, they have to close the menu by touching the X.
Thanks for your help
Hey Nasroo,
I have checked the website and I am not able to replicate the issue on my end.
Hi there,
I’m having an issue where the X icon is in a slightly different location (further towards the right) then the hamburger icon, when the menu is opened. I can’t seem to find anything in the CSS that would be causing this? Happy to supply a link if that helps.
Any help would be appreciated.
Hey Maddy,
Could you please share the URL of the website for me to investigate it further?
I have same the same issue. Any solution? It is also combined with mobile full screen menu css.
Hi again, the URL of the website is https://brightonseeley.com.au/
Thanks in advance!
Hey Maddy,
Please find the code given below and remove it. Your problem will be solved.
.pa-fullscreen-menu .opened .mobile_menu_bar {
position: fixed!important;
}
Let me know how it goes.
Thank you so much for that! Worked perfectly.
You’re welcome Maddy!
Hello 🙂
how can I chnge the size of hamburger icon ? Thanks!
Yes in the Divi module settings.
Hi Nelson,
Thank you for your great tutorials. You have helped me a lot on many websites.
I have a small problem with the display:
I’m currently working on a website with several subpages. I changed the hamburger icon to X. On some subpages, the X is displayed correctly when the menu is open. On other subpages not only the X but also the old symbol is displayed. Thus, both symbols are superimposed.
Do you have any idea?
Thank you and best regards
Julian
I’m looking for a way to enlarge the hamburger icon (and subsequently also the X). How does it work?
Greetings Thom
There is a font size setting for the icon in the Menu module.