Supreme Mega Menu Module

With Supreme Mega Menu Plugin for Divi, you can easily create beautiful and responsive mega menus for your website. This plugin is packed with features and options that allow you to create unique and customized menus that will enhance the user experience on your site. You can choose from a variety of menu layouts, colors, fonts, and styles to create a menu that is perfect for your site.

🧸 Content Options

Adding Menu Items

Click on + Add new Item to add your first Menu Item. Clicking + Add new Item will open a completely new list of design settings (including Content, Design, and Advanced) for your new Menu Item.

See below for individual Menu Item settings.

After you add your first Menu Item, you will see a gray bar Menu Item near the title of your Menu Items shown as a label. The gray bar also has three buttons that allow you to edit, duplicate, or delete the Menu Item.

General

Layout

Here you can change the Layout to either Horizontal or Vertical. Horizontal is good for creating Navigation Bars, and Horizontal is used to show Menu Items on the Left with content on the right or the other way around.

-- Position

When using Horizontal Menu, you can change the position of Menu Items to be either Right or Left.

Trigger

Here you can choose If you want to show the Dropdown on Hover or Click.

Choose from 30+ Different Animations and add stunning Animation to your Mega Menu.

You can also add a sleek Link Hover animation to the Menu Items, choose from 5 different animations here.

Mobile Trigger

Here you can choose If you want to show the Mobile Menu Dropdown on Icon Click or Menu Item. If you choose "Icon" the dropdown will only open when you click the Icon, but If you select the "Menu Item" it will open up on the whole Menu Item click.

Mobile Entrance Animation

You can also add a different Entrance animation for the Mobile Menu here, choose from 30+ different animations.

Mobile Exit Animation

You can even add a custom Exit Animation for the Mobile Menu here.

Mobile Hamburger Alignment

Here you can change the Alignment of the Hamburger on Mobile. You can have Hamburger on the Left and Logo on the Right, or Hamburger on the Right and Logo Left, your Choice!

Gap

Here you can change the Gap between Menu Items.

Logo

Here you can add your Logo Image to the Menu.

Here you can add a Custom URL for Logo.

Here you can choose If you want to open the URL in the Same Tab or in a New Tab.

Elements

Show Arrow

You can enable this option to show a nice sleek arrow before the Mega Menu Dropdown.

Show Search Icon

Enable this option If you'd like to show the Search Icon in the Menu.

🎨 Design Options

Color

Here you can change the Color of the Menu Item Links.

Bg Color

Here you can change the Background Color of the Menu Item Links.

Else you can customize Menu Items by adding Margin/Padding Border, Border Radius & Box Shadow etc, and even customize the Font styling of the Menu Items and a lot more.

Logo

Width

Here you can adjust the width of the Logo Image.

Height

Here you can adjust the Height of the Logo Image.

Else you can customize Logo Image by adding Border, Border Radius & Box Shadow, etc.

Vertical Menu Container

Vertical Dropdown Placement

Here you can choose how you'd like to show the Vertical Dropdown, you can choose from 2 options:

  • Top - The dropdown menu will always align with the First Menu Item

  • With Current Item - The dropdown will align with the current Item, the one you're hovering or clicking.

Width

Here you can adjust the Width of the Vertical Dropdown Menu.

Bg Color

Here you can change the Background color of the Vertical Dropdown Menu.

Else you can customize Vertical Dropdown by adding Padding, Border, Border Radius & Box Shadow, etc.

Badge

Position

Change the Position to either Absolute or Relative. Choosing Absolute will make the badge absolute and you'll be able to control the position of the Badge to where it looks good to you.

Color

Here you can change the Text Color of the badge.

Bg Color

Here you can change the Badge Background color.

Else you can customize Badge by adding Margin/Padding Border, Border Radius & Box Shadow, etc.

This panel is useful If you're using WordPress Menu as a Dropdown and you can customize the links in the Dropdown here.

Color

Here you can change the Text color of the Sub Menu Items.

Bg Color

Here you can change the Background Color of the WordPress Menu Dropdown.

Else you can customize Sub Menu Items by adding Margin/Padding Border, Border Radius & Box Shadow, etc, and even customize the Font styling of the Sub Menu Items and a lot more.

This Panel can be used to Customize the Dropdown/Mega Menu.

Here you can change the width from different options. You can choose Fullwidth If you want the Dropdown to be full-width and choose "Custom Width" If you want to set a custom width for the Dropdown.

Custom Height

Enable this option If you'd like to use a Custom height for the Dropdown.

Icon Color

Here you can change the Arrow Colors that are shown next to the Menu Items.

Icon Font Size

You can also change the Font Size of the Icon that shows next to Menu Items.

Bg Color

Here you can change the Background color of the Dropdown.

Else you can customize Dropdown by adding Border, Border Radius & Box Shadow, etc.

Cart Count

Icon Color

If you've added Icon for the Cart Count, you can change its color here.

Icon Font Size

Here you can change the Icon size of the Cart Count Icon.

Color

Change the Cart Count Number Text Color here.

Bg Color

You can also add a background color to the Cart Count to give it a nice look.

Else you can customize Cart Count Number by adding Margin/Padding Border, Border Radius & Box Shadow, etc, and even customize the Font styling of the Cart Count Number and a lot more.

Image & Icon

Here you can customize the Image & Icon If you've set it up in the Item settings. This Image & Icon show before/after each Menu Item.

Width

Here you can change the Width of the Image If you're using a custom image.

Font Size

Here you can change the Icon Size If you're using Icon.

Icon Color

Here you can change the Icon Color.

Image Icon Bg Color

Here you can change/add a background color to the Image & Icon.

Else you can customize the Image & Icon by adding Padding/Margin, Border, Border Radius & Box Shadow, etc.

Search Icon

Color

Here you can change the Icon Color of the Search Icon.

Bg Color

Here you can change the Background Color of the Search Icon.

Font Size

Here you can change the size of the Search Icon.

Else you can customize the Search Icon by adding Padding/Margin, Border, Border Radius & Box Shadow, etc.

Search Field

Color

Here you can change the Text color inside the Search Field.

Bg Color

Here you can change the Background Color of the Search Field.

Margin

Here you can add a custom Margin to the Search Field.

Padding

Here you can add custom Padding to the Search Field.

Width

Here you can change the Width of the Search Field.

Mobile Width

You can manually change the width of the Search Field for Mobile here.

Mobile Alignment

You can also change the Alignment of the Search Field here for Mobile only.

Else you can customize Search Field by adding Border, Border Radius & Box Shadow, etc, and even customize the Font styling of the Field Text and a lot more.

Arrow

Color

Here you can change the Color of the Arrow that appear before each dropdown If the option is enabled.

Hamburger

Icon

Here you can set a custom Icon for the Hamburger from Divi Icon Library.

Font Size

Here you can set a custom size for the Hamburger Icon.

Color

Here you can change the Color of the Hamburger Icon.

Bg Color

Here you can change the Background Color of the Hamburger Icon.

Else you can customize the Hamburger by adding Padding/Margin, Border, Border Radius & Box Shadow, etc.

Tablet/Mobile Container

Here you can customize your Mobile Menu Popup/Container.

Alignment

Here you can change the Alignment of the Mobile Menu Popup/Container.

Width

Here you can change the Width of the Mobile Menu Popup/Container.

Height

Here you can set a custom height for the Mobile Menu Popup/Container.

Bg Color

Here you can specify a custom Background color for the Mobile Menu Popup/Container.

Else you can customize the Mobile Menu Popup/Container by adding Padding/Margin, Border, Border Radius & Box Shadow, etc.

Tablet/Mobile Close Icon

Icon

Here you can set a custom Icon for the Close Icon from Divi Icon Library.

Font Size

Here you can set a custom size for the Close Icon Icon.

Color

Here you can change the Color of the Close Icon Icon.

Bg Color

Here you can change the Background Color of the Close Icon Icon.

Else you can customize the Close Icon by adding Padding/Margin, Border, Border Radius & Box Shadow, etc.

🧑‍💻 Advanced Options

Use the advanced options to give your Circle Info module custom CSS ID’s and Classes. Add some custom CSS for advanced styling and designate the module's visibility on certain devices.

📌 Item Content Options

Content

Label

Here you can enter your Custom Text for this Menu Item.

Content Type

Here you can choose What type of content you'd like to show. This is the most interesting part where the magic happens. You can choose from below options:

  • Link - This will not show a dropdown and the user can click on this Menu Item to go to a custom URL only.

  • WordPress Menu - This can be used to show a WordPress dropdown menu, you can create this Menu by going to Dashboard -> Appearance -> Menus.

  • Divi Layout - Here you can choose a Custom Layout from the Divi Library as your Dropdown/Mega Menu. Once selected, you'll see an option to select a Layout saved in your Divi Library. And with that, you can build anything using Divi Builder and show it as a Dropdown/Mega Menu on your site.

Badge Text

Here goes your Badge Text to show something like "New", "Latest" or "Hot" and a lot more.

Image & Icon

Use Icon / Image

Enable this option If you'd like to show a custom Image or Icon before or after this Menu Item.

Image

Here you can upload the image that you'd like to show before the Menu item.

Use Icon

Enable this option If you'd like to use Icon instead of Image, once enabled you'll be able to select any icon from Divi Icon Library.

Elements

Show WooCommerce Cart Count

Enable this option if you'd like to show WooCommerce Cart Count in this Menu Item.

Cart Icon

Here you can select a custom Icon for your Cart that will show before the Cart Count Number.

Open Icon

Here you can change the Icon of the arrow (or any icon) when the Mega Menu/Dropdown is open.

Close Icon

Here you can change the Icon of the arrow (or any icon) when the Mega Menu/Dropdown is Closed.

Position

Here you can change the Position of this icon to the Left or Right of the Menu Item.

This is where you can add your Custom Url for this Menu Item that the user can click to go to that URL.

Last updated