How to Change the Divi Mobile Menu Icon

by Phoenix | Oct 25, 2024 | Uncategorized

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.

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

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!

How to Disable Top Tier Dropdown Menu Links in Divi

by Phoenix | Oct 25, 2024 | Uncategorized

Divi Mobile Menu

How to Disable Top Tier Dropdown Menu Links in Divi

Hey DiviDaddys community! 🌟 Want to make your top-tier dropdown menu links unclickable? Here’s a straightforward guide to help you achieve that.

Divi Mobile Menu

Step 01:

Log In to Your WordPress Dashboard 🔐

First things first, log in to your WordPress dashboard.

Step 02:

Create Your Menu in Appearance

Navigate to Appearance > Menus.
Create the menu structure you want, for example, a top-tier “Services” link with submenus like “Web Design,” “SEO,” etc.

Step 03:

Save the Menu and Adjust Theme Options 🛠️

Save your menu settings.
Go to Divi > Theme Options.
Navigate to the Navigation tab.
Under General Settings, enable the option Disable top tier dropdown menu links.
Save your theme option settings.

Step 04:

Clear Cache and Reload Your Page 🔄

After saving your settings, reload your page to see the changes. If the top-tier links are still clickable, try clearing your browser cache or any caching plugins you might be using.

Divi Documentation | More Tutorials