All Collections
FAQ's and Troubleshooting
Changing the Menu Module Hamburger Icon to an "X" When Open
Changing the Menu Module Hamburger Icon to an "X" When Open

Discover step-by-step instructions on how to transform the Menu Module's hamburger icon into an "X" when the menu is open.

Fozla Rabbi avatar
Written by Fozla Rabbi
Updated over a week ago

In Divi, the familiar hamburger menu icon is brought to life through the ETModules icon font.

By default, this icon font is used for both the open and closed states of the menu. However, for a more intuitive and user-friendly experience, we can replace the hamburger icon with an "X" when the menu is open. In this guide, we'll show you how to achieve this effect through custom CSS.

Step 1: Locate the Icon Codes:

In the Divi theme, the hamburger icon is added using the ETModules icon font. You need to identify the icon codes for both the hamburger icon and the "X" icon. The hamburger icon code is typically "61", and the "X" icon code is "4d".

Step 2: Add Custom CSS:

The following custom CSS code can be added to WordPress Dashboard > Divi > Theme Options > Custom CSS field to change the hamburger icon with the "X" icon when opened.

.mobile_nav.opened .mobile_menu_bar:before {
content: "\4d";

Be sure to save the alterations in the theme options for the changes to take effect.

Did this answer your question?