Hire Us
Divi Mobile Menu

How to Change the Divi Mobile Menu Icon

Are you looking to give your Divi mobile menu a unique touch? Changing the mobile menu icon can elevate your site’s look and feel, providing a personalized experience for your users. In this tutorial, we’ll go through how to easily replace the default Divi hamburger menu icon with a custom one using simple CSS techniques.

Divi Mobile Menu

Step 01:

Log In to Your WordPress Dashboard 🔐

First things first, log in to your WordPress dashboard.

Step 02:

Access the Theme Customizer

The Divi Theme Customizer is where you’ll make most design changes. To get started, navigate to your WordPress dashboard, then go to Appearance > Customize. This will open the theme customizer where you can preview changes live.
L
Scroll down bottom for custom css block

/* Change Divi Mobile Menu Icon */
.et_mobile_nav_menu:before {
content: ‘\63’; /* Replace ‘\63’ with the code for your desired icon */
}

Step 03:

Add Custom CSS to Replace the Icon 💻

To change the mobile menu icon, we’ll add a bit of custom CSS. Scroll down in the Theme Customizer to Additional CSS and paste the following code:

Step 04:

Customize the Icon Code

The \63 code corresponds to the hamburger icon. You can replace it with any other FontAwesome icon code. Check FontAwesome’s website for a wide range of icons to find one that suits your website’s vibe.

Elegant Icon Font | More Tutorials

Divi mobile menu icon

Step 05: Save and Preview 💾

Once you’ve made your changes, click the Publish button in the Customizer to save them. After that, preview your site on a mobile device to ensure the icon appears as expected.

Additional Tips

• Ensure your custom icon is compatible with the Divi theme for optimal display.
• Test on multiple devices to confirm responsiveness.
• Experiment with icon colors by adding color properties in the CSS code.
Changing your Divi mobile menu icon is a great way to add a personal touch to your website. With just a few steps, you can enhance your site’s visual appeal and improve the mobile user experience. Try out different icons and find the one that best reflects your brand!

2 Comments

  1. Bill
    Bill on October 26, 2024 at 7:05 am

    Hey Thanks , I would like to replace the hamburger icon with the word MENU. Can you tell me how to do that? Thanks again.

    Reply
    • Phoenix
      Phoenix on October 26, 2024 at 7:09 am

      Hi Bill, thank you for the kind words.

      Try using this CSS snippet
      [css]
      .mobile_menu_bar:before {
      content: “MENU”;
      font-family: sans-serif;
      }
      [css]
      Dammm you can change font-family to whatever font you choose.

      Hope that helps!

      Reply

Submit a Comment

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