Home / Plugins / Support

Hero Menu

  • Documentation
  • Faq
  • Knowledge Base
  • Submit a ticket

Quick Startcopy link

1. Download HeroMenu

To get started, please download HeroMenu from CodeCanyon

2. Install & Activate

In your WordPress backend, navigate to Plugins » Add New » Upload Plugin. Browse to the zip file that you have just downloaded from CodeCanyon and follow the prompts to install & activate HeroMenu.

StyleIcons2

StyleIcons3

Take note

When HeroMenu is installed and activated, it will have no effect on your website frontend. You will only see a change on your website once you have finished setting up your navigation in HeroMenu. Activating your menu can be done here Settings » Menu Integration

3. Creating your first menu

To create your first menu, navigate to Hero Menu » Menus » Add new menu.

NewMenu

 

4. Layout and Order

Layout » Layout and Order

drag

Choose your menu layout by simply switching on or off what you need and drag and drop the items in the order you want. Items will snap left, right or centre.

5. Adding menu items

Layout » Navigation Structure

MenuStructureBuilder

Select the pages that you want to add to your menu from the items on the left.
Click “Add to menu” once pages are selected.
This bit works very similar to the standard WordPress Menu builder, so you’ll feel very comfortable using this.

The following types of items can be added to your navigation.

Pages
Mega Menu’s
Custom Links
Categories
Quick tip

Drag items up and down to change order.Drag items slightly to the right and it will snap under another menu item to become a submenu of that item.

6. Editing menu items

MenuStructureDrag

Click on the little pencil button of each menu item to start edit. Here you will see all the basic elements that you would want to change or edit.

Icons can be added to each menu item by clicking on the icon button.
Select the appropriate icon. We supply you with 360 free icons to use as you please.
The size and colour of the icon are also editable.
Deleting a nav item can be done by clicking on the “bin” button next to the “edit” button.

7. Menu Styling

StyleNav

A very intuitive and visual way to style your navigation. This allows you to style every aspect of your navigation. This includes menu bar, drop downs, mega menus, fonts, colors, size, icons and many more. Our default settings are styled in a way that would look and function great with any website. So by leaving everything as is, should leave you with a great looking menu.

8. Menu Integration

This is the exciting part of HeroMenu, seeing the live version on your website. You can integrate/activate your menu using one of the following steps:

8.1 Menu Location Selector

location

The recommended way of activating your menu, is by selecting the menu location. Navigate to Settings » Menu Integration » Select a Location. To replace the standard WP menu that comes with your theme, select “Primary” from the dropdown list. This should replace the main menu of your WP theme.

Theme locations

Theme location labels could change relative to current theme, most themes should have Primary, Main and Secondary.

8.2 Manual Integration: Plain Shortcode

Add the following shortcode to one of you pages/posts, remember to click update.

[hmenu id=1]

8.3 Manual Integration: do_shortcode For example, replace the following code in your header.php file:

<header id="masthead" class="site-header">
<div id="navbar" class="navbar"><nav id="site-navigation" class="navigation main-navigation"><button class="menu-toggle"><!--?php _e( 'Menu', 'twentythirteen' ); ?--></button>
<!--?php _e( 'Skip to content', 'twentythirteen' ); ?-->
<!--?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_class' => 'nav-menu' ) ); ?-->
<!--?php get_search_form(); ?--></nav><!-- #site-navigation -->
</div>
</header>

With the following –

<?php echo do_shortcode( '[hmenu id=1]' ) ?>

Take note

Remember that the “ID” in shortcode is subject to change. Please make sure that you are referencing the correct menu “ID”. Make a backup of your code before you replace it.

 

Layoutcopy link

Layout & Order

Choose your menu layout by simply switching on or off what you need and drag and drop the items in the order you want. Items will snap left, right or centre.

main

Navigation Structure

Adding menu items

Select the pages that you want to add in your menu from the items on the left. Click “Add to menu” once pages are selected. This bit works very similar to the standard WordPress Menu builder, so you’ll feel very comfortable using this.

MenuStructureBuilder

The following types of items can be added to your navigation.

  • Pages
  • Mega Menu’s
  • Custom Links
  • Categories

Menu structure

  • Your menu items are now added to your navigation and you may now drag them in the order you need.
  • Drag items slightly to the right and it will snap under another menu item to become a submenu of that item.

MenuStructureDrag

Editing menu items

  1. Click on the little pencil button of each menu item to start edit.
    Here you will see all the basic elements that you would want to change or edit.
  2. Icons can be added to each menu item by clicking on the icon button.
  3. Select the appropriate icon. We supply you with 360 free icons to use as you please.
  4. The size and colour of the icon are also editable.
  5. Deleting a nav item can be done by clicking on the “bin” button next to the “edit” button.

edit

Mega Menu

Adding a mega menu

This is the fun part of HeroMenu, where we give you the option to build a great looking mega menu without any coding knowledge.

A mega menu can be added to your navigation by clicking on the Mega Menu button on the left and then give it a name and add to menu.

MegaMenuAdding

Edit mega menu

Edit your mega menu by clicking on the pencil/edit button.

  1. Start selecting the layout you desire by clicking on the “Layout” button. We give you 8 most commonly used layouts to choose from.
  2. Select the content you want to add to each column by clicking on the “Add Content” buttons
  3. Select the type of content you want to display, by clicking on the relevant icon.
    You will now be presented with a popup window where you can add/edit your content for that column.
    You can find more info about Mega Menu content under the “Mega Menu Elements” tab above.
  4. You can add an icon to your menu item that will be displayed on your main menu bar.
  5. MegaMenu can be turned off if you do not want it to display in your website frontend
  6. You can hide your MegaMenu from mobile screens if you want.
  7. Add a background image to your MegaMenu.
    These can be PNGs or Jpegs.
    The position can also be set.

MegaMenuEdit1

  • Items can be edited, deleted and draged left and right to change the order of the columns.
  • Styling of the items will be in the style section of HeroMenu. This bit is purely for layout.

MegaMenuEdit2

Mega Menu Elementscopy link

Text

Mega menu text

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

MegaMenuTextExample

Below is an example of what your text column in your mega menu can look like, just by playing with a few of the settings above.

MegaMenuTextExample2

List

Mega Menu list

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

Adding list items

Click on the type of list item on the left and then select the items from the list on the right and click “Add List Item”

MegaMenuListItems2

Editing list items

  • Click on the pencil icon to open the panel and start editing.
  • Here you will see all settings related to this list item.
  • Choose to add a small description or icon, just by switching it on and editing it.

MegaMenuListEdit

Below is an example of what your list column in your mega menu can look like, just by playing with a few of the settings above. You will see that we have added icons and description text with each list item.

MegaMenuListExample

Contact form

Mega Menu Contact Form

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

MegaMenuContact

MegaMenuContact2

Adding a form

Adding a form to a column can be done in 2 ways.

Sortcode – Create a form using any form plugin and adding the shortcode. (E.g. Gravity Forms, Contact Form 7)

Custom form HTML – This section can used to add in custom form HTML.

Map

Mega Menu Map

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

MegaMenuMap2

MegaMenuMap

Adding a map

Adding a map to a column can be done in 2 ways.

Sortcode – Create a map using the HeroMaps plugin and adding the shortcode.

Custom map HTML – This section can be used to add in custom map HTML.

Images

Mega Menu Images

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

You also have the option of 3 different layouts of where your text should display.

MegaMenuImages

MegaMenuImages2

Posts

Mega menu posts

Under the “Layout and Order” tab. Once you have added a mega menu item in your navigation, start editing it by choosing a layout and adding content. Choose the type of content in the dark grey popup and you will then be presented with a settings popup.

Add_Items_MegaMenu

Settings

You can give your column a heading, if needed. And choose underline, depending on your design preference. You will see in the example below, we have switched on the “Heading Underline” function and gave the column a name.

MegaMenuPosts

Below is an example of what your posts in your mega menu can look like, just by playing with a few of the settings above.

MegaMenuPostsExample

 

Stylingcopy link

Main navigation

A very intuitive and visual way to style your navigation. This allows you to style every aspect of your navigation, but by leaving most of the items on this page as default, will be good enough.

StyleNav

Menu bar dimensions

Setting up your menu bar dimensions is an easy 2 step process by clicking the bar width and then choosing the content width.

Choose between a navigation bar that runs the full width of the screen or at a fixed width. (Bound by the parent div container that wraps the HeroMenu navigation)

StyleNav1

Choose between navigation items that runs the full width of the navigation bar, or a fixed width in the centre of the navigation bar.

StyleNav2

Color presets

Using our preset colors enable you to select a color example, this will then filter through the whole menu, from the main menu, down to the sub navigation and mega menu.

StyleNav3

Background color

Use your own custom colour by adding in a hex value, or use our color picker. You can also add css gradients in your navigation, by clicking on the “Gradients” button and then selecting or adding your second colour. Gradient orientation can also be changed from vertical to horizontal.

Also change the menu bar transparency as needed.

StyleNav4

Hover type and color

Choose from 3 different types of hover effects. Background hover, Underline and Border. Each one of these hover effects can be styled with your own color.

StyleNav5

Border around menu bar

Switch on the the border button and you can add a thin, 1 pixel border around your navigation bar. You also have the option to only add the border to one of the sides. The colour and transparency can also be changed.

StyleNav6

StyleNav7

Add rounded corners to your menu bar by changing the border radius.

Fonts

Choose between more than 650 Google fonts from the dropdown. Edit size, weight , color and hover color.

StyleNav8

Padding

If you feel you need to change the distance between your nav items, feel free to change the padding here. The default setting should be fine.

StyleNav9

Menu shadow

This will add a shadow to your menu bar. Please note that this function is not supported in older browsers.

Logo

Add a logo to your navigation and add a link if you want the logo clickable. The logo size can be changed by giving it a percentage of the menu bar height. Use a transparent PNG, preferably 600px by 600px.

StyleNav10

Mobile logo

We give you the option to have a replacement company logo when the navigation collapses into a mobile nav.

StyleNav11

Sticky menu

Sticky navigation (also called a fixed navigation) is basically a website menu that is locked into place at the top of the screen so that it does not disappear when the user scrolls down the page; in other words, it is accessible from anywhere on the website without having to scroll.

StyleNav12

Activating this will give you a few extra options, like when you want the menu to activate, size, transparency, menu bar color, text color, text size and a different logo if needed.

Here is an example of a menu that becomes a sticky menu when you scroll down.

Arrows for navigation

This will enable a small dropdown arrow next to all dropdown navigational items.

StyleNav13

Line divider

This will enable a line divider between navigational items.

Set the transparency, color and size.

StyleNavLine

Group divider

This will add a group divider item between your navigational sections.

E.g. WooCart, Search, Social

Set the transparency, color and size.

StyleNavGroupLine

Dropdown

Here you would style what your dropdown menus will look like.

StyleDropdown

Background color

Choosing a color preset on the previous window (Styling – Main Navigation) will also filter through to the drop downs and mega menu. This can easily be changed with the tools supplied here. Add gradients to your drop downs by switching on the gradients setting and choose the start and finish color. Transparency of your dropdown and hover state can also be changed here.

StyleDropdown2

Font styling

Choose from over 650 Google fonts and set the size, weight and color. Font hover can also be changed here.

Dropdown width

Fix the width of all drop downs menus.

Padding

You can set the padding around all submenu items by editing these fields. The default 5px should be sufficient.

StyleDropdown3

Menu shadow

Add a css shadow around your dropdown. Set the shadow distance, shadow blur, transparency and color. Please note that this feature does not work in older browsers.

Border around dropdown

Add a line around your dropdown menu. Add the color you need and set the transparency to fit your design.

Arrows in drop downs

Switching this on, will show a small arrow at all fly out menus(sub sub menu). Set the color and transparency as needed.

StyleDropdown4

Dropdown line divider

Switching this on, will add a thin line between dropdown menu items. Set the color and transparency you need.

StyleDropdown5

Mega Menu

This is the fun part of HeroMenu, where we give you the option to build a great looking mega menu without any coding knowledge.

StyleMega

Background color

Choosing a color preset in the “Styling – Main Navigation” section will also filter through to the drop downs and mega menu. This can easily be changed with the tools supplied here. Add gradients to your MegaMenu by switching on the gradients setting and choose the start and finish color.

Background images can also be added to your MegaMenu. (This can be added under “Layout / Navigation Structure”. Each Mega Menu can have its own background image.)

Transparency of your dropdown and hover state can also be changed here.

Fonts

All mega menu font styling in one place. You have all the normal options like Google Fonts, weight, size and color. Hover font color is one setting for all.

StyleMega2

StyleMega3

Mega Menu Width

The width of MegaMenu is determined by the width of your menu bar dimensions. This can be found in “Styling / Main Navigation / Navigation Width”.

StyleMega4

Padding

Here you can add padding around your Mega Menu. The default values should be sufficient.

StyleMega5

Menu Shadow

This will add a shadow around your Mega Menu drop down. Please note that this feature is not supported by older browsers. Set the shadow distance, blur, transparency and color.

Border around mega menu

This will add a one pixel border around your Mega Menu dropdown. You can also set the transparency and color.

Border radius

Change your square corners to round corners by editing this part.

Mega column divider

This will add a one pixel vertical divider between all columns in Mega Menu. Transparency and color of these lines can be changed.

StyleMega6

Search

StyleSearch

We have 3 different search fields that you can choose from, by simply clicking on the one you prefer.

StyleSearch2

Search dimensions

Here you can set the size of the search box

Background

Set the background color of the input field, if you use the light box search field, this will automatically set the background color of the lightbox.

Fonts

Set the font to display in the search field. Style, color, size etc can be changed. Search Icon size can also be changed here.

Padding

This will add padding to the search field

Border around search field

This will add a border to your search field. If you select lightbox, this will style the color of the line under the text field.

Border radius

This will allow you to add rounded corners to the classic search field.

WooCart

StyleWoo

You can activate this icon only if WooCommerce is installed on your website

StyleWoo2

Set the icon size, color and hover color.

The basket icon will have a little circle with the amount of products that was added on your live site.

Social icons

StyleSocial

Here you can activate the social icons you want to add on your nav bar. Just double click the icons you want and this will then be added in sequence beneath the list of icons.

StyleSocial2

You can drag the red bars in a different order if needed.

Click on the pencil button to edit the item.

A panel will open where you can now change icon color and hover color and set things like URL etc.

StyleSocial3

Icons

StyleIcons

This area is purely for viewing the icons that is available in the plugin.

Settingscopy link

Responsive Settings

SettingsResponsive1

Select the breaking point at which your navigation collapses into a mobile navigation. The defaults should be fine and no need to change.

SettingsResponsive

Backupcopy link

BackupBuddy

We have seen instances where – during restoration – database entries for HeroMenu were prevented from being properly restored when using BackupBuddy. In order to resolve the issue, please follow the steps below when setting up BackupBuddy:

  • Go to BackupBuddy Settings -> Advanced Settings.
  • For “Database method strategy” select “Commandline”
  • Uncheck “Break out big table dumps into steps”
  • Uncheck “Use separate files per table (when possible)”

How do I remove the 'Menu' label from the mobile menu?

This can be removed from the ‘Settings > Responsive’ tab by editing the ‘Label for mobile menu’ input field. The text can either be completely removed or renamed as required.

menu_lable_setting

The plugin backend perpetually loads and only shows ‘Loading dashboard core…’

This is most likely due to a file permission issue and it will be necessary to connect to the site via FTP or an alternate file manager and change the file permissions for the plugin folder and all of its contents to 755.

Is it possible to translate the menu into other languages?

Hero Menu does not natively support translation and this would have to be done by using tools such as ‘WPML’ or ‘Polylang’ and implementing multiple menus.

The integration of the menu would need to be updated in order to include the multiple shortcodes within your header and would also need to be within an ‘if’ statement in order to check which language is currently selected and so display the required menu.

An example snippet of code can be found below on how the integration could be done. Please note that this snippet assumes that the selected language is shown by a query string within the URL. The ‘THE_LANGUAGE_NAME’ would be replaced with the language code in the URL i.e. en for English

<?php
//get the current URL
$hmenu_actual_link = "$_SERVER[REQUEST_URI]";
//create the lang var and get the value
$hmenu_slected_lang = explode('lang=', $hmenu_actual_link);
if( $hmenu_slected_lang[1] == 'THE_LANGUAGE_NAME' ){
echo do_shortcode('[hmenu id=2]');
} else {
echo do_shortcode('[hmenu id=1]');
}
?>

Can the mobile menu be sticky?

By default, this feature is disable for mobile devices. We have done this because ‘fixed’ elements cannot be scrolled through and this presents a problem for long menus on mobile devices because if the menu is larger than what can be displayed at once on the mobile device it won’t be possible to scroll to the remaining elements which are outside of the viewport. We would not recommend force enabling this feature however if your situation does call for it this can be enabled with some CSS that can be added on the ‘Advanced’ tab of the menu settings.

@media(max-width: 767px){
#hmenu_load_1 { position: fixed;}
}

Note that the pixel value ‘767px’ is the default break point at which the mobile menu is shown. If you have altered this it would be necessary to change this value to match. The numeric value within ‘hmenu_load_1’ reflects the ID of your menu which you can find on the ‘Dashboard’ tab of the plugin backend i.e. the first created menu would be 1 and this increments in values of 1 so that the second menu would have the ID 2 and you’d use ‘#‘hmenu_load_1’ etc.

The menu is not appearing full width even though this has been set within the options.

In most cases this is due to having the menu within your theme’s default content containers which have a width assigned to them and so are containing the menu and preventing it from exceeding this width. It would be necessary to either adjust the widths of these containers or their padding and margining or alternatively place the Hero Menu shortcode outside of these containers by editing the menu integration in your header template file.

I change options and styles in the plugin backend but they are not being show on the front end.

This issue is usually due to caching, especially if you are running any sort of caching plugin. It would be necessary to clear this cache each time a change if made in order to see it reflect or temporarily disable caching. Alternatively, this might also be a server side cache in which case there should be an option within your hosting control panel to clear or disable this cache or it might also be a local browser cache which needs to be cleared.

However, if changes within the backend of the plugin are not being saved at all and keep reverting back to their defaults upon saving or refreshing the backend this could be a filer permissions issue where the plugin files aren’t being created or altered. In which case it would be necessary to change the file permissions of the plugin folder and all of its contents to 755 via FTP or an alternate file manager.

How can I use a custom font for my menu?

Hero Menu provides the option of using Google Fonts for your menu, however if you need to use a custom font or a font from another source it would need to be manually changed as you will not be able to import a font so that it is available within the menu settings.

You’ll first need to ensure that the font has been added to the site and is available for use. Once this is done the changes to Hero Menu will need to be manually done for each element within the menu with some custom CSS. This CSS can be added to the ‘Advanced’ tab of the menu settings or through any other custom CSS section.

As an example for changing the font for the main navigation the following can be used:

.hmenu_navigation_root > li a div span { font-family: Georgia; }

It would then be necessary to apply further CSS to the other text elements within the menu as required.

Theme Integration Guides
BridgeBeThemeUltimatumKarmaSalientX ThemeMobiusBeaver BuilderAvadaCanvas (WooThemes)Braxton MagazineU-DesignEnfoldDiviTwenty FifteenTwenty FourteenTwenty ThirteenTwenty TwelveTwenty Eleven

We'd love to help you

NOTE: It's that festive time of year again and we will be taking a short break to recharge from the 23rd of December 2016 until the 3rd of January 2017. During this time our support will be limited but we will try to respond to high priority tickets as best we can. Have a great holdiay!

While we will always do our best to get back to you within an hour or two, we ask that you please allow for a maximum of 24 hours for feedback. Monday - Friday

Support Includes

Bug fixing
How to questions
Assistance with integration

Support does not include

Support for 3rd party plugins
Custom Coding
Theme customization