How To Change The Divi Mobile Menu Hamburger Icon To An X When Open Tutorial by Pee Aye Creative

How To Change The Divi Menu Module Hamburger Icon To An X When Open

Nelson Miller Pee Aye Creative
This quick CSS code snippet and tutorial will change the Divi Menu Module hamburger icon into an X when the mobile menu is open.

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.

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.

/*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;
}

Last updated Oct 10, 2023 @ 12:26 am

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 :)

Blog Post Optin

Please share this post!

Nelson Lee Miller (aka The Divi Teacher)

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.
Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Asset 7

Shop Our Divi Products

Plugins • Courses • Templates

Visit The Shop

Pee Aye Creative Black Friday Sale

Our Once A Year Sale Is Happening Now!!!

25% OFF all Divi Plugins, Courses, and Child Themes!

Shop The Sale Now!

Divi Tutorials On YouTube

Our videos have views! Join subscribers and enjoy over video tutorials!

Visit Our Channel

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

62 Comments

  1. Tim

    This is great, is there a similarly simpler way to adjust the time it switches to an X?
    Your tutorials are excellent!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  2. mara

    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 !

    Reply
  3. Bryan

    Is there an easy way to add a transition to both?

    Reply
  4. Entr

    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 !

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
  5. Luca

    Hi! Congratulations on your tutorials, really great!
    I have a problem with the “X” code that doesn’t match ‘4d’

    They have been updated?

    Reply
    • Milan
      \4d
      

      worked for me 😉

      Reply
      • beatriz

        Thanks, I had the same problem on some devices and that worked

  6. Sean Craig

    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.

    Reply
    • Chip

      That’s right. I can confirm that.

      Reply
    • Henry

      Me, too. Thanks, Sean!

      Reply
  7. Mike Nelson

    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!

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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

      Reply
      • Mike Nelson

        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

  8. Senan

    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

    Reply
  9. Fernando Cabrera

    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?

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      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.

      Reply
      • Jemma Pollari

        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?

      • Nelson Lee Miller (aka The Divi Teacher)

        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.

      • Jemma Pollari

        Thank you so much for that! Now it’s working.

  10. shawn

    hi, how can put animated effect for the icon when change to multiply icon

    Reply
    • Jimmy Lemon

      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;
      }

      Reply
      • Oliver Gehrmann

        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!

  11. Dave Hinxman

    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?

    Reply
    • Hemant Gaba

      Could you please share the URL of the website where the Menu is placed for us to investigate further?

      Reply
  12. Anna

    Hi! For me “4” was not working to display the X icon. I had to use “\4d”

    Thanks!!!
    Anna

    Reply
  13. Louise

    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!

    Reply
    • Hemant Gaba

      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?

      Reply
  14. John Tanedo

    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

    Reply
  15. Nasroo Ajani

    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

    Reply
    • Hemant Gaba

      Hey Nasroo,

      I have checked the website and I am not able to replicate the issue on my end.

      Reply
  16. Maddy Seeley

    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.

    Reply
    • Hemant Gaba

      Hey Maddy,

      Could you please share the URL of the website for me to investigate it further?

      Reply
      • Pavol

        I have same the same issue. Any solution? It is also combined with mobile full screen menu css.

      • Hemant Gaba

        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.

      • Maddy Seeley

        Thank you so much for that! Worked perfectly.

  17. Ola

    Hello 🙂
    how can I chnge the size of hamburger icon ? Thanks!

    Reply
  18. Julian

    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

    Reply
  19. Thom

    I’m looking for a way to enlarge the hamburger icon (and subsequently also the X). How does it work?
    Greetings Thom

    Reply
  20. Mikala

    When adding the full code
    #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 {
    content: ‘\4b’;
    }
    The 3 line of the hamburger menu becomes only one horizontal line. And on some subpages it turns into the letter K.

    Reply
    • Hemant Gaba

      Hi Mikala!

      The icon code is no correct in the code you shared. Please use the following code and see if it helps:

      #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 {
      content: ‘\4d’;
      }

      Reply
  21. Levi

    Hi. I tried the following code you offered but even though the burger icon rotates, it turns just into a rotated burger to the right. There’s no x.

    Here’s my url: https://amrelektro.ro/magazin

    I can’t seem to make it work.

    Reply
    • Nelson Lee Miller (aka The Divi Teacher)

      I do not understand. The code in this tutorial is about replacing the icon, so if the icon is different for open state, then it will show the other icon. Maybe some cache issue?

      Reply
  22. Mikala

    Is there a way to change the x icon to a different color than the hamburger icon?

    Reply
    • Hemant Gaba

      Hi Mikala!

      Please add the following code instead of the above one:

      .mobile_nav.opened .mobile_menu_bar:before {
      content: ‘\4d’;
      color: red;
      }

      Change the color in the code as per your requirement.

      Reply
      • Mikala

        Thank you for this, works like a charm 😉

        Can the same be done for the logo?
        A different file with a different color than before opening the menu? Or is it some JS that is necessary?

        As always, great tutorials. Thank you 😀

Submit a Comment

Your email address will not be published. Required fields are marked *

Recent Posts

0

Your Cart