WordPress is one of the most feature-rich platforms available for web development. A functionality which is not already present in a website can be easily introduced through plugins. Many people migrate HTML website to WordPress or transfer from other platforms only to take advantage of such benefits. One such beneficial feature is a mega menu.
In this article, we will be discussing an easy method to add a mega menu to WordPress websites. These drop-down interfaces help owners in locating all the navigation options of the website in a single place. Hovering the cursor over the defined area activates the menu which expands to show all the navigation links.
Websites with a large amount of content usually have a complicated navigation structure. The mega menu can be a handy guiding tool for such interfaces. Let us see how the feature can be added to WordPress websites through a plugin.
Step 1: Search And Install The Plugin
Log on to the admin dashboard of the WordPress website with your username and password. In this article, we will explain the method with the help of the Max Mega Menu plugin. Go to “Plugins” and click on “Add New”. Put the name of the plugin in the search field.
Use the above image to check whether you have found the correct product or not. Install the plugin and activate it.
Step 2: Aligning The Color Scheme With The Theme
The plugin will now be visible in the menu on the admin dashboard. First, we will align the color scheme of the mega menu with that of the website theme. The colors used in the theme can be found by using the inspect tool. Open the website in a browser and right-click on the page. Select the “Inspect” option and find the color scheme of that page. Copy the color hex code and save it in a text file.
Now go to the “General Settings” of the Max Mega Menu plugin. Click on “Menu Themes” and locate the “Menu Bar” tab.
When you click on the tab you will see the options as shown in the above image. Replace the menu background color with that of the theme.
Step 3: Create A Mega Menu
We will now create a mega menu with the plugin. Go back to the admin dashboard and go to Appearance> Menus. A mega menu is created on top level items so you will have to pick the main categories first. Once the top level items have been selected, you will have to enable the plugin. This can be done by accessing “Max Mega Menu Settings”. The box in front of “Enable” needs to be checked to start building the menu.
Under the heading “Menu Structure” you can see the top level items listed. As you hover the cursor over an element, a “Mega Menu” tab will become visible. When it is clicked, a popup will appear where the number of columns to be displayed can be set. You can also add WordPress widgets to a menu area in this popup. Save the changes and your menu has been created.
Step 4: Setting The Icons
The process to add a mega menu to WordPress is technically completed after the above step but some customization still remains. We will now see how the icons for each item can be set. Hover the cursor over the item you want to add an icon to and the “Mega Menu” tab will appear. Click on it and you will see an option named “Icon” on the left. When it is selected, the icons menu will open. Choose the one you like and it will be saved automatically.
Step 5: Configuring Additional Settings
There are some additional settings which you must configure so that the mega menu can be used easily by anyone. Hierarchical items will be shown in a flyout menu with an item appearing only when the cursor hovers over it. This menu will be visible on the left-hand side by default. The settings can be adjusted to shift it to the opposite side.
The method to configure the additional settings is the same as above. Users have to hover over an element to make the “Mega Menu” button visible. Clicking it will present the related options. You can hide the text of an item which is helpful in displaying social sharing buttons. The arrow indicator can be hidden as well. Users can disable a link by removing the “href” attribute. The menu items and the icons are displayed on the left by default. Their position can be changed by making adjustments to the settings. There is also the option to hide selected items on the mobile version of the website.
After confirming all the changes, visit your website and you will find the mega menu working perfectly.
- 10 WordPress Plugins That Integrate AI and Machine Learning on Your Website
- Best ways to secure WordPress website
- 10 common WordPress mistakes you should avoid
- 10 easy ways to secure WordPress website
- 10 reasons to avoid pirated WordPress themes and plugins
The simplicity with new features like this can be included in a website is what motivates people to migrate from other platforms like HTML to WordPress. This simple method to add a mega menu to WordPress using the Max Mega Menu plugin will be helpful for owners of large websites as they can easily add a convenient navigation tool for the users.
Brandon Graves is an online marketing expert & WordPress expert in HireWPGeeks – Best WordPress Development Company in the San Francisco, CA, USA. He is a passionate blogger and loves to share her knowledge with a large community of WordPress.