Supreme Mega Menu Module
Last updated
Last updated
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.
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.
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.
When using Horizontal Menu, you can change the position of Menu Items to be either Right or Left.
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.
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.
You can also add a different Entrance animation for the Mobile Menu here, choose from 30+ different animations.
You can even add a custom Exit Animation for the Mobile Menu here.
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!
Here you can change the Gap between Menu Items.
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.
You can enable this option to show a nice sleek arrow before the Mega Menu Dropdown.
Enable this option If you'd like to show the Search Icon in the Menu.
Here you can change the Color of the Menu Item Links.
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.
Here you can adjust the width of the Logo Image.
Here you can adjust the Height of the Logo Image.
Else you can customize Logo Image by adding Border, Border Radius & Box Shadow, etc.
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.
Here you can adjust the Width of the Vertical Dropdown Menu.
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.
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.
Here you can change the Text Color of the badge.
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.
Here you can change the Text color of the Sub Menu Items.
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.
Enable this option If you'd like to use a Custom height for the Dropdown.
Here you can change the Arrow Colors that are shown next to the Menu Items.
You can also change the Font Size of the Icon that shows next to Menu Items.
Here you can change the Background color of the Dropdown.
Else you can customize Dropdown by adding Border, Border Radius & Box Shadow, etc.
If you've added Icon for the Cart Count, you can change its color here.
Here you can change the Icon size of the Cart Count Icon.
Change the Cart Count Number Text Color here.
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.
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.
Here you can change the Width of the Image If you're using a custom image.
Here you can change the Icon Size If you're using Icon.
Here you can change the Icon 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.
Here you can change the Icon Color of the Search Icon.
Here you can change the Background Color of the Search Icon.
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.
Here you can change the Text color inside the Search Field.
Here you can change the Background Color of the Search Field.
Here you can add a custom Margin to the Search Field.
Here you can add custom Padding to the Search Field.
Here you can change the Width of the Search Field.
You can manually change the width of the Search Field for Mobile here.
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.
Here you can change the Color of the Arrow that appear before each dropdown If the option is enabled.
Here you can set a custom Icon for the Hamburger from Divi Icon Library.
Here you can set a custom size for the Hamburger Icon.
Here you can change the Color of the Hamburger Icon.
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.
Here you can customize your Mobile Menu Popup/Container.
Here you can change the Alignment of the Mobile Menu Popup/Container.
Here you can change the Width of the Mobile Menu Popup/Container.
Here you can set a custom height for the Mobile Menu Popup/Container.
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.
Here you can set a custom Icon for the Close Icon from Divi Icon Library.
Here you can set a custom size for the Close Icon Icon.
Here you can change the Color of the Close Icon Icon.
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.
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.
Here you can enter your Custom Text for this Menu Item.
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.
Here goes your Badge Text to show something like "New", "Latest" or "Hot" and a lot more.
Enable this option If you'd like to show a custom Image or Icon before or after this Menu Item.
Here you can upload the image that you'd like to show before the Menu item.
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.
Enable this option if you'd like to show WooCommerce Cart Count in this Menu Item.
Here you can select a custom Icon for your Cart that will show before the Cart Count Number.
Here you can change the Icon of the arrow (or any icon) when the Mega Menu/Dropdown is open.
Here you can change the Icon of the arrow (or any icon) when the Mega Menu/Dropdown is Closed.
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.
