How To Create Stunning Divi Mobile Menus With Divi Toolbox

Are you looking for more advanced features and design options for your Divi mobile menu? Here’s a tutorial on how to create stunning menus for smartphones and tablets with the top-rated plugin Divi Toolbox.

Summary: Divi Toolbox

Plugin rating:

Divi Toolbox is a premium Divi plugin that adds tons of new options to Divi. My favorite part is the massive additional options for the Divi mobile menu. It’s compatible both with the default Divi Theme Customizer menu and the menu module (using the Theme Builder header).

I’ve been using Divi Toolbox on my own websites as well on my client websites since the release back in 2018 and I’m really happy with the flexibility, usability and extensive support. Divi Toolbox is like a Swiss Army Knife for Divi.

Mobile Menu Features

  • Collapse nested mobile menu submenus
  • Choose from 20+ beautiful mobile menu animations
  • Choose from 9 hamburger icon animations
  • Add any content you like in the mobile menu (using the Divi library layouts, shortcodes or widgets)
  • Set custom mobile menu breakpoint
  • Use a custom menu logo on mobile
  • Use fixed mobile menus
  • Use fixed mobile menus
    Add text (i.e. “MENU”) to the hamburger menu
  • Change mobile browser theme color
  • … and much more.

And this is just the mobile menu settings. Divi Toolbox is also stacked with settings for the desktop menu, powerful global settings, blog customizations and other great mobile enhancements like changing the mobile column count – just to mention a few things. 

Pricing & License

Enter the discount code DIVIMUNDO15 in the checkout to get 15% off.

Regular license: €49 €41.65 for lifetime usage on 1 website.

Extended license: €169.00 €143.65 for lifetime usage on unlimited websites.

All features + automatic updates are included. Support is provided for 6 months after the purchase date. There is no free version of Divi Toolbox. The plugin is developed by Divi Lover.

Installing the plugin

  1. Purchase Divi Toolbox at Divi Lover
    Enter the code DIVIMUNDO15 in the checkout for 15% discount
  2. Download the plugin ZIP file
  3. Log in to your WordPress dashboard
  4. Go to Plugins » Add new and click Upload Plugin
  5. Upload and activate the plugin.

That’s it. You should now see Divi Toolbox in the WordPress dashboard menu.

Install Divi Toolbox

Add your license key

  1. From your WodPress dashboard, go to Settings » Divi Toolbox Activation
  2. Add your license key in the field API Key and click Save Changes

Now you have access to automatic plugin updates.

Divi Toolbox License Key

The Divi Toolbox User Interface

Divi Toolbox has two different areas where you choose your settings settings:

  1. The Divi Toolbox Settings in the WordPress dashboard at Divi » Divi Toolbox
  2. The Divi Toolbox Customizer tab at Divi » Theme Customizer » Divi Toolbox

Divi Toolbox does not add any new modules in Divi. It simply enhances and enriches the existing modules and templates in Divi via these two interfaces.

Part 1: Divi Toolbox Settings

This is where you enable and disable features in Divi Toolbox. You can choose between these tabs:

  • Admin
  • Global
  • Header
  • Footer
  • Mobile
  • Blog
  • Modules

You’ll find most of the mobile menu options in the Mobile tab but if you want to use shortcodes and Divi library layouts in your mobile menu, you’ll need to enable “Divi Layouts Shortcode” in the Admin tab first.

Also, if you want to add a CTA button in your mobile (and desktop) menu, you need to enable “Add CTA Menu Button” in the Header tab first.

Let’s take a closer look under the hood at the mobile options in Divi Toolbox. There are so many options that I had to divide the screenshot into two separate images!

Divi Toolbox Mobile Settings 1/2

Change the mobile browser theme color and the mobile menu breakpoint. Enable custom mobile menu style and use a separate menu for mobile vs. desktop. Add your website logo, search bar, social media icons and widgets to your mobile menu. Use a custom menu trigger to create a fixed hamburger menu with a nice background and a label text. Change logo on mobile, enable custom hamburger icons, change the hamburger animation effect and collapse nested submenus (killer feature!). 

Divi Toolbox Mobile Settings 2/2

Change mobile columns count, enable parallax background effect on mobile, reverse column stacking order in mobile, add hyphens for pretty line breaks in mobile or prevent words from breaking in mobile.

Part 2: Divi Toolbox Customizer

Divi Toolbox adds a new tab in the Theme Customizer called – yes you guessed it right – Divi Toolbox. This is where you’ll do most of the nitty gritty design settings.

Go to Theme Customizer » Divi Toolbox » Mobile to customize for example the:

  • Mobile menu bar
  • Menu bar search icon
  • Hamburger icon
  • Mobile menu container
  • Mobile menu animation
  • Mobile menu links
  • Nested submenus
  • Mobile menu call to action button
  • Mobile menu search bar
  • Mobile menu widgets
  • Mobile menu social icons

You will see a different set of tabs depending on which settings you have enabled in the Divi Toolbox settings. Let’s take a look in the Theme Customizer!

Divi Theme Customizer

The Divi Theme Customizer.

Divi Toolbox Customizer

The Divi Toolbox Customizer.

Divi Toolbox Mobile Customizer

The Divi Toolbox Mobile Customizer.

Final words

Divi Toolbox is one of the must have plugins that I use in all my Divi projects. It’s a perfect way to fill in the gaps in Divi in regards to design settings and features.

It’s worth the money just for its’ mobile menu features alone. The other features are just a massive bonus. 

Plugin rating:

Enter the discount code DIVIMUNDO15 in the checkout to get 15% off.

Related posts

0 Comments

Submit a Comment

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Affiliate Disclaimer

All content on DiviMundo is funded by you – our beloved readers. Some of the links are affiliate links. This means that if you click on the link and purchase something, I will receive an affiliate commission. But it will never cost more for you. Thanks for your support!

Victor Duse, founder of DiviMundo