ThemeHunk Mega Menu

ThemeHunk Mega Menu is a free, fast and most user friendly Mega Menu WordPress plugin. Follow this doc and learn how to customize it.

Plugin Installation

  • Download Free ThemeHunk Mega Menu from Here.
  • Now, Open your WP Dashboard and Upload the Plugin Zip file into Plugins panel and Activate it.
  • Now you can See “ThemeHunk Mega Menu” panel in your dashboard.

How to Style Menu Items ?

  • First learn how to create Menu for your site. For this Navigate to this post.
  • To style your menu items. Go to Dashboard > TH MegaMenu. You can modify all aspects of the Menu styling, including the font, color and size (height) of your menu.

These settings allow you to style the menu bar and the menu items.

Menu Item

Use these settings to change the appearance of menu items.

  • Menu Height – Using this option you can Adjust the height of Menu.
  • Menu Items Align – You can align your Menu items Left, Right and Center.
  • Menu Background – You can pick any desired Background Color for menu.
  • Menu Link Color – You can pick Menu link color and Menu link hover color (Current item color).
  • Menu Link Background Color – You can pick any desired Link Background Color.
  • Arrow – Using this option you can select Arrow styles.

Sub Menu Item

Use these settings to change the appearance of Sub menu items.

  • Menu Background – You can pick any desired Background Color for menu.
  • Menu Link Background Color – You can pick any desired Link Background Color.
  • Menu Link Color – You can pick any desired Link Color.
  • Menu Padding – You can adjust Top, Bottom, Left and Right padding of your menu items.
  • Menu Margin – You can add Left and Right Margin.
  • Menu Border Radius – You can adjust Top, Bottom, Left and Right Border radius in Menu items.

menu-bar-setting-mega-menu

Mobile Menu

Menu Item

Use these settings to change the appearance of menu items in Mobile device.

  • Responsive Breakpoint – Your mega menu will automatically collapse down to a mobile style menu on smaller screens. You can adjust the screen width at which the menu converts to a mobile style using this Responsive Breakpoint option. For example, if your theme collapses to a mobile style layout at 768px wide, you might want to set the Responsive Breakpoint to 768px.
  • Panel Open – Using this option you can select panel open side Left, Right or Center.
  • Toggle Text – You can add the Toggle bar Text and also pick color for the text.
  • Toggle Background – You can pick any desired color for Toggle bar background.
  • Toggle –  This allows you to control the elements within the toggle open and close bar icons with their Color.
  • Toggle Bar Height – You can adjust the Height of your Toggle bar.
  • Arrow – Using this option you can select Arrow styles.
  • Mobile Menu Background – You can pick any desired Menu Color.
  • Menu Link Background Color – You can pick any desired Menu background Color.
  • Menu Link Color – You can pick any desired Link Color.

Sub Menu Item

Use these settings to change the appearance of Sub menu items in Mobile device.

  • Sub Menu Hide – Using this option you can Hide the Sub menu items in Mobile devices by checking the box.
  • Menu Link Background Color – You can pick Menu link Background color and Menu link background hover color (Current item color).
  • Menu Link Color – You can pick Menu link color and Menu link hover color (Current item color).

mobile-menu-mega-menu

How to Enable Mega Menu Setting ?

  • Go to Dashboard > Appearance > Menus. From the Screen Options check the box of  “ThemeHunk MegaMenu Setting”.
  • Now you’ll see a ThemeHunk Mega Menu Settings box on the left and a Green Mega Menu link will appear when you hover mouse over each menu item.
  • From the ThemeHunk Mega Menu Settings you can choose the Menu location and save it.

enable-mega-menu

  • Now you can start implementing the Mega Menu functionality. This includes adding widgets to our menu, menu icons and applying custom styling to the menu.

How to Edit Mega Menu ?

To start edit a Mega Menu, Hover over a menu item and click the Green “ThemeHunk Mega Menu” button. A Mega menu window will open, click on the Button “Activate MegaMenu”.

edit-mega-menu

  • Once the Mega Menu is activated, you can add rows and then drag and drop widgets into the columns of these rows.
  • Now you’ll see many widgets on your left. Scroll down to find desired Widget and drag that widget from there and drop on the column.
  • Mega Menu drag-and-drop builder automatically saves the changes as you edit the menu layouts.

Drag-&-Drop-Mega-Menu

  • To Style the mega menu settings for an item, go to Appearance > Menus, hover over a menu item and click the green “ThemeHunk Mega Menu” button.
  • This will open Mega menu setting panel. On the left side you’ll see “Options ” tab click on it.

Mega Menu Items Options

  • Panel Width –  You can adjust the panel width in ( %, Px, em ).
  • Panel fit End to End – By enabling this option, it will Stretch and fix your Menu panel to end to end.
  • Panel Alignment – Choose the Panel Alignment Left or Right.
  • Background Image – You can upload a Background image here.
  • Background Color/Overlay Color – You can pick any background color from the Color palette or you can pick Overlay color in your background image by increasing or decreasing the opacity.
  • Panel Padding – You can easily add Top, Bottom, Left or Right padding (px) in your menu panel.
  • Border – You can Pick Border color and add Border padding.
  • Border Radius – Add Border radius Top, Bottom, Left and Right.
  • Column Padding – Add Column padding Top, Bottom, Left and Right.
  • Widget – Here you can Pick color for your widgets items. Pick desired color for Widget Title, Text, Link and Link hover.
  • Widget Content Alignment – Align your Widget Content Left, right or center by selecting the image.

mega-menu-options

  • You can set an icon for each menu item in your menu. To set an icon, go to Appearance > Menus.
  • Now navigate to the menu item you wish to add an icon to and click the green ‘ThemeHunk Mega Menu’ button to open the Mega Menu settings panel. Select the ‘Icon’ tab on the left.
  • Click on any icon to apply it to the menu item. The icon selection will be saved automatically.

menu-icons