WordPress offers us a wide variety of menu creation and customization options thanks to its native options and all the plugins and themes that we can integrate into them.
Although Divi offers quite customizable menu options, you may prefer to use a plugin as Hero Menu for your Mega Menu and we will teach you how to integrate it into your menu plus the various customization options you will see in it. While these options are very similar in each Hero Menu tab, some have their particularities.
Hero Menu offers simple and complex options for the menus of your web page and is highly customizable, easy to use and with updates that add useful functions such as adapting the menu according to the roles assigned to users who log in and extra browsing for the login and logout link.
This plugin allows the quick creation of menus that can also be responsive and touch support for iOS, Android and Windows 8 operating systems. Hero Menu also allows creating dynamic content, customizing it with shortcodes, CSS and HTML, using Google Maps, Contact Forms and WooCommerce.
You can add icons and customize them, use the built-in drag-and-drop builder, integrate the menu with just one click, set an activation distance with the fixed menu, it is supported by the most popular browsers and is also compatible with most of the most popular WordPress themes.
Integrating Hero Menu
Enter the Hero Menu settings, select Menu Integration and then Menu location. On the right, you will see a selector and there will be the Primary, Main and Secondary options. Select the one that best suits you according to the design of your website.
There is a manual way to integrate the menu and it is through shortcodes. When applying the changes, make sure you are referencing the menu ID correctly.
Add the following shortcode to one of your pages or posts and save the changes:
[hmenu id = 1]
Locate your header.php file and replace the code below with
<? Php echo do_shortcode ('[hmenu id = 1]')?>
This is the one that you must replace:
<header id = "masthead" class = "site-header" role = "banner">
<a class="home-link" href="<?php echo esc_url( home_url('/')); ?> "title =" <? php echo esc_attr (get_bloginfo ('name', 'display')); ?> "rel =" home ">
<h1 class = "site-title"> <? php bloginfo ('name'); ?> </ h1>
<h2 class = "site-description"> <? php bloginfo ('description'); ?> </ h2>
<div id = "navbar" class = "navbar">
<nav id = "site-navigation" class = "navigation main-navigation" role = "navigation">
<button class = "menu-toggle"> <? php _e ('Menu', 'twentythirteen'); ?> </ button>
<a class="screen-reader-text skip-link" href="#content" title="<?php esc_attr_e('Skip to content','twentythirteen');?? "> <? php _e ('Skip to content ',' twentythirteen '); ?> </a>
<? php wp_nav_menu (array ('theme_location' => 'primary', 'menu_class' => 'nav-menu')); ?>
<? php get_search_form (); ?>
<! - # site-navigation ->
<! - #navbar ->
<! - #masthead ->
With the following –
<? php echo do_shortcode ('[hmenu id = 1]'?)?>
Customize your Mega Menu
In the Styling tab, you will see many options to customize each aspect of your menu. The default version is made to work with most web pages, but you can adapt it to the needs of your project in many ways!
Menu bar dimensions
Setting the menu bar is very easy, you just have to activate it and determine the width and height of it. You can also select whether you want it to be full width or fixed and centered, and the location of the navigation elements.
You can configure the color of the complete menu, the main menu, the sub-navigation, and the mega menu.
Not only can you use a picker color or add your own color, but you can also add CSS gradients by clicking on the button and selecting if the orientation is vertical or horizontal. You can also adjust the transparency of the menu bar.
Hover type and color
Hero Menu offers 3 types of hover effects: background, border and underline. Each of them can have its own color.
Border around menu bar
Hero Menu allows you to add a thin border around the menu or only on one side. You can also set the color, transparency, and corners of the menu bar.
Set the font size, color, and color of the fonts. There are more than 650 available from Google Fonts.
Set the distance between the navigation items in your menu.
You can add a shadow to the menu bar. The Hero Menu developers point out that this feature will not be available in outdated browsers.
Add a logo and the link of your brand. It’s recommended that it be PNG, transparent and 600px by 600px.
You can add a different logo for mobile browsing.
As you already know, the fixed or sticky menu is active at the top of the web and doesn’t move with scrolling. When activated, more customization options will be displayed such as color, text, size, logo, transparency and more.
Arrows for navigation
In the drop-down menu, you can add navigation arrows to the items.
Add a dividing bar between the navigation elements of the menu. You can determine the transparency, color, and size of them.
You can add dividers between groups of menu items, much like the previous option but it will allow you to group the elements according to their type. For example, separate the group of social buttons. You can set the transparency, color, and size of these divider bars.
You can see this tab to the right of the Main Navigation. Adjust how your menu’s display function will look.
You can add background colors, transparency and gradients from the drop-down menu.
You can modify the hover of the font, color, and size, as well as choose from the more than 650 available from Google fonts.
You can adjust the width of all drop downs menus.
The default padding is 5px, but you can adjust it according to your needs.
Add shadows to your dropdown menu and determine transparency, blur, and color. Similar to the main navigation menu option, it doesn’t work in outdated browsers.
Border around dropdown
Add a border to the dropdown menu with the color and transparency that best fits your design.
Arrows in dropdowns
When you activate this option, you will see customizable guide arrows in the dropdown sub-menus.
Dropdown line divider
Customize the color and transparency of the lines that will divide the items from the drop-down menu. You can also deactivate this option.
This tab is very useful to customize the mega menu without using code, which is great to save time and for those who do not have much experience in web design.
You can add colors, gradients, transparency for each menu, hover color and even a background image for each mega menu.
You can customize all the fonts of the mega menu in this option, the hover color is applied to all the fonts of the mega menu.
Mega menu width
The width of the mega menu is determined by the dimensions of the menu bar. You can adjust it in the main Navigation tab that we mentioned at the beginning.
As in the similar options of the previous tabs, the default fill values should be sufficient but you can add the ones you want.
Customize the distance of shadow, transparency, color and more.
Border around mega menu
The border that this option adds is one pixel. You can determine transparency and color
You can change the corners of the menu in this option by determining the radius.
Mega column dividers
With this option, you can add a dividing line of one pixel in all the columns of the mega menu and determine the transparency and color.
There are three different types of search bar that you can add to your Mega Menu: Classic, which adds a bar where the user can type the search term; slide down, that when clicking on the icon displays a bar under the menu and lightbox, which when clicking on the magnifying glass shows a transparency that occupies the whole screen and the search bar in the center.
Within the customization options you will find the dimensions of the search box, the background color of the field and the lightbox, the type of search field font, fill, border of the search field and radius of the border of the search field.
If you use WooCommerce, you can activate this icon, determine its size, color and hover. In addition, the cart will have a small circle with the amount of products added to your website.
Social network icons
Here you can add the icons of social networks and link them to them. You add them only by double-clicking, change the color of the icon and the color of the hover.
In this tab, you will see the variety of icons available in Hero Menu.
Responsive menu configuration
The default options work very well for all kinds of menus, but you can determine the indicators so that the menu becomes mobile.
Would you recommend the use of Hero Menu? What other plugin do you like for Mega Menu? Tell us!