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

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.

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

Last updated Aug 31, 2021 @ 6:21 pm

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

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.

Leave A Response!

By commenting you agree to our Blog & YouTube Comments Policy

42 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
  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.

Submit a Comment

Your email address will not be published.

Recent Posts

Pin It on Pinterest

0

Your Cart