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]
or
- 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> </a> <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 (); ?> </ nav> <! - # site-navigation -> </ div> <! - #navbar -> </ header> <! - #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!
Main Navigation
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.
Color presets
You can configure the color of the complete menu, the main menu, the sub-navigation, and the mega menu.
Background color
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.
Fonts
Set the font size, color, and color of the fonts. There are more than 650 available from Google Fonts.
Padding
Set the distance between the navigation items in your menu.
Menu shadow
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.
Logo
Add a logo and the link of your brand. It’s recommended that it be PNG, transparent and 600px by 600px.
Mobile logo
You can add a different logo for mobile browsing.
Sticky menu
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.
Line divider
Add a dividing bar between the navigation elements of the menu. You can determine the transparency, color, and size of them.
Group divider
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.
Dropdown
You can see this tab to the right of the Main Navigation. Adjust how your menu’s display function will look.
Background color
You can add background colors, transparency and gradients from the drop-down menu.
Font styling
You can modify the hover of the font, color, and size, as well as choose from the more than 650 available from Google fonts.
Dropdown width
You can adjust the width of all drop downs menus.
Padding
The default padding is 5px, but you can adjust it according to your needs.
Menu shadow
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.
Mega Menu
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.
Background color
You can add colors, gradients, transparency for each menu, hover color and even a background image for each mega menu.
Fonts
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.
Padding
As in the similar options of the previous tabs, the default fill values should be sufficient but you can add the ones you want.
Menu shadow
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
Border radius
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.
Search
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.
WooCart
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.
Icons
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.