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.
