Divi Plugin Highlight: Divi MadMenu

Posted on October 17, 2020 by in Divi Resources | 9 comments

Divi Plugin Highlight: Divi MadMenu

Find It In The Divi Marketplace

Divi MadMenu is available in the Divi Marketplace! That means it has passed our review and has been found to meet our quality standards. You can visit Divicio.us in the marketplace to see all of their available products. Products purchased from the Divi Marketplace come with unlimited website usage and a 30 day money back guarantee (just like Divi).

Purchase In The Divi Marketplace

Divi Madmenu is a third-party plugin for Divi that adds new menu features to the Divi Theme Builder. Add buttons, a Woocommerce shopping cart, search option, and adjust the placement of each element. Design independent menus for desktop, tablet, and phones, and set the breakpoints. Set the header as fixed and add animations. Every element is customizable. In this article, we’ll take a look at Divi Madmenu and see what it can do.

Divi Madmenu with the Divi Theme Builder

Divi Madmenu with the Divi Theme Builder

Divi Madmenu was designed specifically to work with the Divi Theme Builder. Once you’ve installed the plugin, go to the Divi Theme Builder, click Add Global Header, and select Build Global Header to create your custom header.

Divi Madmenu with the Divi Theme Builder

You’ll see a new module added to the Divi Builder called MadMenu. This is the only module you’ll need to use, but you can use others if you want to add even more features.

Content

Content

The module displays a menu and provides lots of options for customizing it. Elements allows you to enable features such as the menu for desktop and mobile, logo, search, cart, and two buttons. They can be arranged differently and styled independently.

Content

Desktop Menu allows you to choose the menu to display, set the breakpoint to determine when it changes to a mobile menu, and set the submenu animation and duration.

Content

Mobile Menu lets you select a different menu for mobile and adds options to collapse the submenus, make the parent links clickable, and choose the accordion mode. It includes the same animation options as the desktop menu.

Content

Mobile Menu Toggle includes icon and label options including the toggle format, closed and opened labels, and the label position.

Content

If Logo is enabled, you’ll see an option to choose the logo, provide a link URL, and decide if it will open in the same window.

Content

If Search is enabled, you can choose an icon or an image.

Content

For Cart, you can show the icon, contents, or icon and contents, select an image or show the logo, choose visibility options, a live update, etc.

Content

Button 1 and Button 2 are adjusted independently, but they have the same options. Add text, an icon, choose the icon placement, visibility, link, and select how it opens. In the example above, I’ve added text to both buttons and added an icon to the first button.

Design

Design

The Design tab adds options for the text, menu items, desktop and mobile menus, desktop and mobile submenus, logo, search, cart, buttons, and lots more. Here’s a look at a few of them.

Design

Layout General lets you choose the alignment. Set it to right, left, center, space-around, space-between, and space-evenly. Choose the dropdown direction and set the menu order for both desktop and mobile. In this example, I’ve set the alignment to right and set the dropdown direct of the submenus to upwards.

Design

Layout Elements lets you control the alignment, width, etc., of the menu, logo, search, cart, button 1, and button 2.

Design

Each of the elements has a Text design option that includes settings for both the normal and fixed menu. Adjust the active link color, regular link color, font, font weight, size, spacing, etc. The example above is Text: Desktop Menu. I’ve changed the colors, font sizes, and spacing.

Text

Design

This is Text: Desktop Submenu. I’ve changed the colors, font sizes, and made the text upper case.

Design

This is Text: Mobile Menu Toggle. It provides text customizations for the open and close text. I’ve changed the font color and increased the size and letter spacing.

Design

This is Text: Mobile Menu. I’ve changed the font colors and made the text upper case.

Design

Text: Mobile Submenu controls the fonts for the dropdown menu. I’ve changed the colors, selected uppercase text with a larger first letter for each word, increased the font size, and centered the text.

Design

Text: Button 1 and Text: Button 2 has the same options and controls their buttons independently. I’ve increased the font size for both buttons and made Button 1 larger. I’ve also changed their colors. For Button 2, I selected a different font.

Design

Text: Cart controls the font for the cart content text. I’ve changed the font color, increased the size, made the font italic, underlined the font with a wavy style, and changed the underline color.

Menu

Design

Desktop Menu Items gives you control over the backgrounds, margin, padding, corners, borders, box shadow, etc. I’ve changed the background color, added margin and padding to add space between the menu items, added corners, borders, and a box shadow.

Design

Desktop Submenu Items gives you the same control as the menu items. I’ve changed the background color, added a border to the top of each item, and added a box shadow.

Design

I like that each of the items can be styled individually. I’ve added box shadows to the main menu, menu items, and search, and I’ve rounded their corners. I’ve also changed the colors of the fonts and backgrounds.

Design

Here’s one that I created for my test site. I’ve added the logo with a box shadow, main menu, search, cart, and both buttons. The buttons are styled with white backgrounds and black borders. I’ve also added a bottom border using colors from the layout.

We can get a better idea of what can be done with menus by digging into the demos.

Divi Madmenu Demos

Divi Madmenu Demos

The plugin comes with 10 Madmenu demos that you can upload to Divi Library. Several of the demos have images within their folders. You’ll need to upload them to the media library.

Divi Madmenu Demos

To use a demo with the Theme Builder, click to build a global header. Click to insert a section and choose Add From Library. Now you can choose any of the demos to use.

Divi Madmenu Demos

Use the demos as a starting point to create designs or just add your logo and menus. They make good use of the background colors, logo options, search options, and CTA buttons. Let’s look at a few of the demos with my test site. They include different designs for the desktop, tablet, and phone headers.

Demo 1

Demo 1

Demo 1 uses the site title, menu, and button 1. The menu uses the center alignment. The submenu includes styling with a box shadow and borders to separate the links. I’m hovering over the second link.

Demo 1

Mobile increases the size of the fonts and uses the same styling for the main menu and submenu. It also uses text with an icon for the open and close button and replaces the site’s title with the logo.

Demo 2

Demo 2

Demo 2 adds a logo, search with a circled icon with a border to one side, centered menu, shopping cart, and buttons. Both of the buttons display social media logos. The submenu items are style independently of the background.

Demo 2

The mobile menu centers all of the icons, replaces the menu text with an open icon, and adds the light blue for the menu.

Demo 3

Demo 3

Demo 3 makes interesting use of buttons. Button 1 includes text to log in or register and it has a hover effect that removes the background on hover. Button 2 uses an image of a line-drawn heart.

Demo 3

For mobile, the open/close button includes the icon and text under the icon. Icons for the buttons are equally spaced across the header using space-between. The site’s title is replaced with the logo, which is moved to the right.

Demo 5

Demo 5

Demo 5 uses space-between for the layout and displays the buttons as CTAs. Both buttons use different colored backgrounds to stand out.

Demo 5

The mobile menu places the buttons on the far right and left and they add icons. The logo and open/close button with text and icon are placed in the center.

Demo 7

Demo 7

Demo 7 places the buttons on both sides of the header with the menu in the center. The logo is placed above the site’s name. The menu includes the open and close icon with text. The items in the dropdown menu are separated from each other so parts of the background can show through.

Demo 7

The mobile version keeps the buttons in their place and replaces the text with icons. The site’s title is also removed.

Demo 8

Demo 8

Demo 8 includes bold yellow with a dropdown menu and title to the left, and the menu with buttons on the right. Each of the buttons includes graphics.

Demo 8

The mobile menu places the buttons on the left and the logo and menu icon on the right.

Demo 10

Demo 10

Demo 10 uses a gradient for the background and places a darker background behind each of the icons. The buttons include text and icons. Each of the links in the dropdown menu is separated from each other and the active link is darker. The logo is placed on the left.

Demo 10

The mobile menu removes all of the icons except for the search icon. The menu is replaced by the open/close icons, and the logo is placed in the center. The dropdown menu looks the same.

Purchase Divi Madmenu

Divi Madmenu can be purchased in the Divi Marketplace for $39 per year for unlimited usage and one year of updates and support.

Ending Thoughts

Divi Madmenu for the Divi Theme Builder has a lot of features and customizations, making it easy to design just about any type of header you might need. The vast amount of adjustments in the design tab can be confusing at first, but they’re simple to use and it doesn’t take long to get the hang of what controls what. Using the two buttons along with adding images and icons to the search and cart buttons opens up a lot of design possibilities. If you’re interested in creating interesting menus with a single module, Divi Madmenu is worth a look.

We want to hear from you. Have you tried Divi Madmenu? Let us know what you think about it in the comments below.

Featured Image via venimo / shutterstock.com

Looking For More Great Divi Extensions? Check These Out!

Divi Carousel Module 2.0

Robust and extremely customizable carousel module for divi.

View Product

1004 Sales

Divi Supreme Pro

With 40+ Divi premium modules and extensions to choose from. Take ...

View Product

848 Sales

Table Maker

Divi-Modules – Table Maker brings beautiful responsive tables to the ...

View Product

513 Sales

Divi Modal Popup

Create interactive popups, overlays, and lightboxes for videos, ...

View Product

436 Sales

Divi Responsive Helper

The Divi Responsive Helper allows you to easily adjust device ...

View Product

297 Sales

Divi Events Calendar

Easily display and style events from The Events Calendar with custom ...

View Product

589 Sales

DiviMenus

A powerful menu builder that brings the coolest designs and popups ...

View Product

255 Sales

Divi Masonry Gallery

Create awesome masonry galleries with Divi Masonry Gallery.

View Product

275 Sales

Premade Layouts

Check Out These Related Posts

9 Comments

  1. Hello Sir,

    Can you request to add Madmenu in your Divi market place please, we really need it. Try to add it ASAP so that we can buy it from one place that is Divi marketplace, expecting your support on this one, please.

    We need this plugin very badly, but like to get it from your marketplace we trust Divi service provider, hope you make it work and add it in your market place now.

    Regards
    Suffian Ahmed

    • Hope Randy A. Brown will answer this here and work on it to add the same madmenu to market place soon. Waiting for your valuable response, please. Thank you in advance, appreciated.

    • Yes thank to add that MadMenu into your marketplace. But the price is same what we saw in their official website with no lifetime support. 😉 Anyhow it’s a good decision. Appreciated.

    • Can By Randy A. Brown reply on this point please we really need slide-in off-canvas mobile menu using Divi MadMenu. Please reply how to make this menu as said by Mr. zaishi please reply ?

    • Hi Zaishi.

      Slide-in menu feature is not available yet but will be added to the future versions of the plugin (I am the developer of Divi MadMenu).

  2. The Divi plugin is one of the most important WordPress plugins. You have nicely discussed the Divi plugin in this content. So thank you so much.

  3. Hello! Do you know if I can add a woo search instead of the classic search?

  4. Very underrated, and it’s now a very important part of my business to make my developing go efficiently.

Leave A Reply

Comments are reviewed and must adhere to our comments policy.

Join To Download Today

Pin It on Pinterest