The hamburger icon—that small symbol of three horizontal lines you see in mobile menus—is an essential part of any responsive website. In Divi, this icon is automatically generated when the screen size is reduced. However, it often doesn’t match the website’s design or color scheme. That’s why this article explains how to change the hamburger menu color in Divi easily, using both the Theme Customizer and custom CSS. And if you’re looking to take customization even further, you can use the Divi Custom Menu module, which allows you to change icons, images, and styles effortlessly—no coding required.

What Is the Hamburger Icon in Divi?

The hamburger icon in Divi is the visual element used to toggle the mobile menu on small screens. Its default design is minimalist, and its color is usually inherited from the global header settings. However, this icon doesn’t always adapt well to custom backgrounds or styles, which can impact the site’s overall design and usability.

Changing its color may seem like a small tweak, but it directly affects the mobile user experience. A good visual contrast improves menu visibility and maintains aesthetic consistency.

With tools like the Divi Custom Menu module, you can even replace the hamburger icon with your own image or a more on-brand symbol, greatly enhancing the final design.

How to Change the Hamburger Menu Color in Divi: Methods

Using the Theme Customizer

Divi allows you to modify the menu color using the Theme Customizer (Appearance > Customize > Header & Navigation). However, this method has some limitations:

• Go to the WordPress dashboard > Appearance > Customize
• Navigate to Header & Navigation > Primary Menu or Fixed Menu
• Change the text or background color to affect the menu

Important: This change applies to the entire menu, so the hamburger icon might inherit the text color. If your design needs more precise styling, CSS is recommended.
.

How to change the hamburger menu color in Divi Using Custom CSS

To gain full control over the hamburger icon color in Divi, custom CSS is the most effective option. Here’s a basic example:

.mobile_nav .mobile_menu_bar:before{ color: #6d25bc !important; }

This code changes the icon color to a purple tone. To apply it:

1. Go to Divi > Theme Options > Custom CSS
2. Paste the code snippet
3. Save changes and preview in mobile view

You can replace #6d25bc with any hex color code that matches your brand palette.

Applying Color on Hover or Active State

It’s a good design practice to change the icon color depending on its state:

.mobile_nav .mobile_menu_bar:hover:before{ color: #6d25bc !important; }

This changes the color when the user hovers over the icon, improving interaction feedback.

You can also change the icon color when the menu is open:

.mobile_nav.opened .mobile_menu_bar:before{ color: #d50fe0 !important; }

This creates a visual transition to indicate the menu is active.

How to change the hamburger menu color in Divi With Our Divi Menu Builder Plugin

If you’re looking for a flexible, visual, and hassle-free way to fully customize your Divi menu, the Divi Custom Menu plugin is a must-have.

This module works like a fullscreen menu—but instead of using Divi’s default design, it lets you build your own menu with any Divi Builder element. You can add:

• Eye-catching videos or images
• Login forms or CTAs directly inside the menu
• Custom icons or images for menu links
• Fully branded styles, colors, and animations

You can also create multiple menus and activate them with one click—perfect for seasonal campaigns or switching between different layouts (e.g., with active banners vs. a cleaner version).

You’re no longer limited to Divi’s standard menu. With this plugin, you can:

• Replace the hamburger button with a custom icon or image
• Turn the menu into a creative space for dynamic or promotional content
• Design completely custom menus for mobile and desktop—no coding required

In short, Divi Custom Menu transforms your header into a fully editable and creative area. If you’ve been dreaming of a menu that doesn’t look like a menu—this is the tool for you.

Explore Divi Custom Menu

Step-by-Step Example

How to Change the Hamburger Menu Color in Divi Using CSS

Let’s say your site has a light header background and you need a dark hamburger icon. Here’s how to do it:

1. Open Divi > Theme Options > Custom CSS
2. Paste this code:

.mobile_nav .mobile_menu_bar:before{ color: #111 !important; }

3. Save changes and test on multiple devices.

Pro tip: Use the browser’s element inspector (F12) to find exact class names if your theme has customizations.

Add Color on Scroll or Click

On many websites, the header changes color after scrolling. To maintain visibility, adapt the hamburger icon color too:

.et-fixed-header .mobile_nav .mobile_menu_bar:before{ background-color: #fff !important; }

This activates once the header becomes fixed and changes the icon to white.

Common Errors and How to Fix Them

Even though changing the hamburger menu color in Divi seems simple, some common issues may occur:

• Color doesn’t apply: Often caused by low CSS specificity. Using !important usually solves it, but refining selectors is better.
• Icon not visible on mobile: The hamburger only appears in responsive view. Always test in mobile mode or on an actual device.
• Plugin interference: Some menu plugins may override your styles. Inspect the element to find which class is in use.
• Normal vs. fixed header: Divi uses different classes depending on the header state. Make sure you cover both in your CSS.

Design Tips for Customizing Your Mobile Menu

Customizing the hamburger icon isn’t just about looks—it directly affects user experience. Here are a few useful tips:

• Make sure the icon color contrasts well with the header background
• Consider changing the color when the menu is open (active state)
• Add smooth transitions to avoid harsh color changes:

.mobile_nav .mobile_menu_bar:before{ transition: background-color 0.3s ease; }

If your site has a modern or minimalist look, opt for solid colors and thinner lines. If it’s more bold and expressive, go for gradients or hover effects.

Also, if you’re using the Divi Theme Builder, you can apply these styles directly to your custom header templates using the same CSS snippets.

how to change the hamburger menu color in Divi : Improve Mobile Navigation with Style

Changing the hamburger menu color in Divi doesn’t just improve your site’s aesthetics—it also enhances the mobile user experience. Whether you’re using basic theme settings or advanced CSS, this small change makes a big impact on responsive navigation.

At Destaca Imagen, we know that visual customization is key to building a consistent and attractive website. When designing headers with Divi, every detail counts. The hamburger icon, although small, is a key interaction point. Make it visible, functional, and aligned with your brand.

And if you want full control over your menu—custom icons, images, layouts, and seamless integration with the Divi Builder—check out our Divi Custom Menu plugin. It’s the ultimate solution to take your menu to the next level.

Want to make this even easier for your clients? Integrate these improvements into your Divi templates with preconfigured modules—or include a CSS snippet directly in your client documentation.

Need a guide for other Divi menu elements? Let us know, and we’ll create a new tutorial!

How to Change the Hamburger Menu Color in Divi | Destaca

Find everything you need to create with Divi

Divi plugins | Divi Themes | Divi Layouts

At Destaca Imagen, we bring your ideas to life with Divi. We create unique DIVI templates that transform your website into a visual and functional experience, tailored to your needs. Give your project the boost it deserves with our innovative and fully customizable designs. The future of your website starts here!