HashThemes - WordPress Themes
  • Home
  • WordPress Themes
    • Free WordPress Themes
    • Premium WordPress Themes
  • WordPress Plugins
    • Super Floating & Flying Menu
    • WooCommerce Ajax Cart
    • Easy Elementor Addons
    • Simple Floating Menu
    • Mini Ajax Woo Cart
    • Hash Elements
    • Smart Blocks
  • Docs
    • Articles
    • Free Themes
      • Total Documentation
      • Square Documentation
      • HashOne Documentation
      • Viral Documentation
      • Viral News Documentation
      • Viral Mag Documentation
    • Premium Themes
      • Total Plus Documentation
      • Square Plus Documentation
      • Viral Pro Documentation
  • Support
  • Blog
  • Contact
  • Login

Create Mega Menu

  • Home
  • Articles
  • Create Mega Menu

Create Mega Menu

Mega Menu allows you to show a bunch of menus in a beautiful and organized way. With our premium WordPress themes, you don’t have to buy and install extra mega menu plugins. In this tutorial, we will guide you on creating a mega menu with the Total Plus plugin.

Let’s get started by creating a new menu.

  • Log in to the WordPress Dashboard.
  • Go to Appearance > Menu Page.
  • Click on create a new menu link at the top of the page.
  • Enter a name for your new menu in the Menu Name field.
  • Click the Create Menu button.

Add the Menu Item from the left. You can add Page, Posts, Custom Links, or Categories.

Let’s add a Page Menu Item(About Us). On Clicking the Page Menu Item, the menu bar expands and you will see the option to Add the Navigation Label, MegaMenu, Megamenu Columns, and choose the icon.

  • Enter the Navigation Label. By default, it will show the title of the page, post, or category depending on the menu you add.
  • Choose the Megamenu Option. By default, the megamenu is disabled. You can choose Megamenu – Full Width or Megamenu – Auto Width. With Megamenu – Full Width, the megamenu will cover the full width of the menu. With Megamenu – Auto Width, the megamenu will cover the width depending on the number of columns.
  • Select the number of columns to display in the mega menu.
  • You can add the icon before or after the menu label. Select the icon that you want to add.

Once you have created the Main Menu Item. Now it’s time to add the submenu. Add the menu item from the left available list of menu items or create a custom link. Drag the menu item to the right to make it the submenu. You will see a submenu indented to right than the main menu. Click on the submenu item to expand. In the submenu, new sets of fields will appear.

  1. Navigation Label – It is the text that appears in the menu. By default, it will show the title of the page, post, or category depending on the menu you add. However, you can change to a different title.
  2. Is Heading? – If the heading is set to yes, the link will be disabled and the menu item will show as a heading. You can even hide the menu and display the submenu under it only.
  3. Mega Menu Template – You can create your own mega menu template from Dashboard  > Mega Menus. Once you create a mega menu template, you can assign it here. (We will discuss in more detail later)
  4. Mega Menu Widget Area – You can even show the widget in the mega menu column. For this just choose the Widget Area and then go to Appearance > Widgets and add the widget content.

Note: Is Heading, Mega Menu Template, Mega Menu Widget Area fields only work if the Mega Menu is enabled in the parent menu otherwise it will work as simple normal links.

Let’s start by adding the Simple Links

  • Choose the Megamenu – Full Width for the Megamenu option in the Parent Menu(Services).
  • And set the Megamenu columns to 4.
  • Add the submenu items and drag them under the Parent Menu(Services) as shown in the below Screenshot. Leave all the fields in the submenu to their default.
    • Is Heading? – No
    • Mega Menu Template – Don’t Choose
    • Mega Menu Widget Area – Don’t Choose

This is how the MegaMenu will appear in the frontend. The submenu will float with 4 column for the left to the right. Remember we have set the Mega Menu Column to 4.

Now, let’s set the menu as shown in the below screenshot.

  • Add 4 Custom Links with Navigation Label as below and set the Is Heading option to Yes
    • Column 1 Heading
    • Column 2 Heading
    • Column 3 Heading
    • Column 4 Heading
  • Add the submenu under each heading. We have added 2 submenu items under each heading. You can add as many as you want.

Now what happens is that the 2nd level submenu floats from the left to the right with 4 columns as we had set the Mega Menu Column to 4. And the 3rd level submenu (the menu under 2nd level menu) appear below it in the list without floating.

Now let’s create a MegaMenu from Template

To create a MegaMenu from Template, we first need to create a template for the megamenu. Once you create a megamenu template, a list of created template will appear in the drop-down of the Mega Menu Template option in the menu field.

  • Go to Dashboard > Mega Menus and click on Add New.
  • A normal post editor will appear. Add the title of the Mega Menu and click on the Page Builder tab as shown in screenshot 1

  • A page builder will appear. Click on the Row button as shown in screenshot 2 and set the column as required.

  • We have added 3 columns as shown in screenshot 3.

  • Now add the widgets in the created columns.  We have added the “Icon Text” widget. You can add any widget from the available 30+ widgets as shown in screenshot 4.

  • After you have created a Mega Menu template, go to Dashboard > Appearance > Menu. Create a menu and add menu items. Choose the menu item that you want to show the megamenu and set the MegaMenu – Full Width for the Mega Menu option and Choose column 1 for the Mega Menu Columns.

  • Add the custom link as a submenu of the megamenu and then hide the heading by setting the Is Heading option to Hide. And choose MegaMenu Template that we created earlier in the Mega Menu Template option as shown in screenshot 6.

  • The megamenu appears in the front end as shown in screenshot 7.

Now let’s create a MegaMenu from Widgets

To create a MegaMenu from the widget, we need to go to the widget page and then add the widgets into the widget areas. You can create your widget area which we will discuss below.

  • Go to Dashboard > Appearance > Widget Page.

  • You can add the widgets in the available widget area in the right column but it would be better to create your own widget area so that you have separate widget areas for your menu.
  • Scroll to the bottom of the widget page. You will see a box that will allow you to create the widget as shown in screenshot 2.

  • Enter the name of the widget and click on Create Widget Area button. Create as many widgets as you need.
  • Once you create the widgets area, it will appear in the right column of the widget page where you can add the widgets from the left column.
  • Add the required widget for the menu from the left column as shown in screenshot 3.

  • After you have added the widgets for all the created widget areas, go to Dashboard > Appearance > Menu. Create a menu and add menu items.
  • Choose the menu item that you want to show the megamenu and set the MegaMenu – Full Width for the Mega Menu option and Choose column 3 for the Mega Menu Columns as we are going to create a MegaMenu with 3 columns.
  • Add the 3 custom links as a submenu of the megamenu and then hide the heading by setting the Is Heading option to Hide. And choose the Widget Area that we created and add the widget for each custom link as shown in screenshot 4.

  • The megamenu appears in the front end as shown in screenshot 5.

Important: You need to save the Menu as Primary Menu for the MegaMenu to Work. MegaMenu does not work in other Menu locations.

  • Frequently Asked Questions (2)
  • Square Plus Guides (19)
  • Total Plus Guides (19)
  • Viral Pro Guides (18)
  • Privacy Policy
  • Terms and Conditions
© 2023 HashThemes. All Right Reserved.
We use cookies on our website to give you the most relevant experience by remembering your preferences and repeat visits. By clicking “Accept All”, you consent to the use of ALL the cookies. However, you may visit "Cookie Settings" to provide a controlled consent.
Cookie SettingsAccept All
Manage consent

Privacy Overview

This website uses cookies to improve your experience while you navigate through the website. Out of these, the cookies that are categorized as necessary are stored on your browser as they are essential for the working of basic functionalities of the website. We also use third-party cookies that help us analyze and understand how you use this website. These cookies will be stored in your browser only with your consent. You also have the option to opt-out of these cookies. But opting out of some of these cookies may affect your browsing experience.
Necessary
Always Enabled
Necessary cookies are absolutely essential for the website to function properly. These cookies ensure basic functionalities and security features of the website, anonymously.
CookieDurationDescription
cookielawinfo-checkbox-analytics11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional11 monthsThe cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance11 monthsThis cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy11 monthsThe cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.
Functional
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Performance
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Analytics
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Advertisement
Advertisement cookies are used to provide visitors with relevant ads and marketing campaigns. These cookies track visitors across websites and collect information to provide customized ads.
Others
Other uncategorized cookies are those that are being analyzed and have not been classified into a category as yet.
SAVE & ACCEPT
Powered by CookieYes Logo
Scroll Top
Scroll Bottom