Huger is a Mega menu WordPress plugin for Elementor for getting highly customizable navigation in any part of your page. The plugin has straightforward and flexible settings to create a clear, convenient, and extensive menu for different sites so users can find all important information faster.
The plugin allows you to use Elementor templates as a source, which means the menu can contain any type of content. In addition to the usual list with the item titles, you can get the necessary structure of menu elements with images, videos, interactive elements, search bar, or other required things. Add any widgets and shortcodes to the mega menu block. This is an easy way to get horizontal or vertical orientation in several clicks. Order the main menu items directly from the Elementor Editor.
Compatible with Elementor TemplatesWoocommerce Category SupportedCustomizable Mobile MenuCrafted for Elementor BuilderIncludes Templates for ElementorCompletely Cross-Browser SupportSuitable for all kinds of Layouts and TemplatesPerfect for Popular Elementor Themes
Set up a multi-level menu with flexible settings for each of the levels, apply animation and adjust the display position via the offset options. The responsiveness settings allow managing the navigation display for different devices. Select the toggle icon for the mobile menu and specify its position, add the menu background and customize other options, there is everything you need to create a user-friendly and unique mobile, tablet or desktop mega menu for your website.
We made sure that it was easy for you to get started with Huger. With the plugin, you get 5 unique stylized and go-to-use templates. These are just some examples that can inspire you to create your style. It provides you a quick start in a few clicks.
Detailed style settings for each mega menu element will help to get the required result. You can manage size, typography, colors, background, border, submenu offset, close toggle style, and other different things. It is possible to apply various styles for different menu item states like normal, hover or active.
Huger for Elementor is exceptionally compatible with all modern browsers. It does not matter which browser users view your site: Chrome, Firefox, Opera, Safari, or Edge. Everything will look great on all devices and in all browsers.
Features of the Huger plugin for Elementor
Supports horizontal or vertical layout
Using Elementor Templates as a submenu
Customizable Mobile Menu
Adding icons for submenu indicator
Multi-level menu customizability
Custom toggle and close menu icon
Flexible settings of a submenu display position
Custom content for submenu
Responsive and friendly to any devices
Multiple navigations for one page and anywhere on the site
Woocommerce compatibility
Font Awesome Icon Support
Font Awesome Icon Picker Integrated
Customizable fonts, colors, borders, backgrounds, etc.
Responsiveness settings
Works well with all WordPress themes built on Elementor
Totally Seo Friendly
Included pot file for quick translation on any language
Perfect for RTL direction
Fast and smooth installing
Tested and compatible up to WordPress 5+
Lightweight and Fast
All major browsers supported Chrome, Firefox, Safari, Opera, and Edge
Easy to use and customize with modern User Interface
Installation Guide and detailed Users Manual
Six months Included Support for CodeCanyon buyers
The plugin installation takes only a few seconds. Also, you do not need to make any additional settings. The plugin is ready to work immediately after installation – you only need to install and activate it in WordPress. Read more about capabilities and settings in the Online Documentation.
Installing
Installing the WordPress plugin is quick and straightforward. After you have downloaded the archive with the plugin, you will see the file with the plugin inside. Unzipped purchased the product you will see inside the archive with the plugin pluginname.zip There are two ways to install it:
Installation of the Plugin through the WordPress Admin panel ( Recommended for most users )
STEP 1
First of all, open WordPress admin area login page and login in into WordPress as Admin. To do this visit http://yoursitename/wp-admin
STEP 2
Go to Plugins > Add New
Add New Plugin to WordPress
STEP 3
Click Upload Plugin Button
Upload New Plugin to WordPress
STEP 5
Choose archive with Plugin and press Install Now Button
STEP 6
After Installing go back to the Plugins page and click Activate below plugin title
Activate Installed Plugin
Installation the plugin through FTP or build-in File manager
STEP 1
Use Login and Password to connect to your web-server via FTP or use your hosting file manager.
STEP 2
Upload archive with plugin to /wp-content/plugins
STEP 3
On next step Unzip the archive with the plugin
STEP 4
Installing WordPress Plugin is almost finished. Go to the Plugins page and click Activate below plugin title. You can find out your username and password on the website of your hosting provider.
Activate Installed Plugin
After installing and activating the plugin, you can go to settings of the Plugin. Also, you can read more helpful articles about WordPress Themes and WordPress Plugins.
Settings
The Mega Menu plugin allows you to use Elementor templates as a source, which means the menu can contain any type of content. In addition to the usual list with the item titles, you can get the necessary structure of menu elements with images, videos, interactive elements, search bar, or other required things. Add any widgets and shortcodes to the mega menu block. This is an easy way to get horizontal or vertical orientation in several clicks. Order the main menu items directly from the Elementor Editor.
For further work, you need the Elementor to be installed on your site. You can download it from wordpress.org
Open or create a page using Elementor and drag the widget to a page using the Element editor to start customizing. In the left pane of the editors, you can customize the widget to the style of your site. Each of the tabs presented a specific group of settings:
In the Content section, you can manage the basic settings of the mega menu such as layout display, menu items, mobile display, submenu, icons, logo, etc.
General settings
Layout – select the menu display layout: horizontal or vertical.
Submenu indicator – select an icon to be added for menu items that have sub-items as an identifier. The available options: Chevron, Angle, Plus, Circle, Minus, Square, Custom(upload own SVG icon or choose one from the library).
Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
Pointer animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
Menu items
The block for managing the menu items. The items can be added, removed, or duplicated.
Main Menu Items
To add a new element, click “Add Item” and fill all the necessary fields:
Title – enter the title of the menu item
Link – paste the link for the current menu item
Submenu – select the submenu source: WP menu – regular WordPress menu that can be created via Appearance> Menus; Template – Elementor template that can be created via Templates> Add New/Import.
Mobile menu settings
Responsive breakpoint – specify a device or custom screen resolution for which the toggle mobile menu will be displayed. The available values: Mobile, Tablet, Custom.
Full width – the toggle to enable/disable the full-width display for the mobile menu.
Menu position – select a mobile menu position from the available options: Left, Right, Top.
Toggle icon – select the toggle icon from the library or upload your own SVG icon.
Close menu icon – select the close menu icon from the library or upload your own SVG. icon
Toggle align – specify the alignment for the toggle icons: Left, Center, Right.
Submenu click area – select a clickable area for submenu items.
Submenu
Expand menu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
Animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
WP menu settings
A settings block for a submenu with a regular WordPress menu.
Layout – select the menu display layout: horizontal or vertical.
Pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
Submenu indicator – select an icon to be added for menu items that have sub-items as an identifier. The available options: Chevron, Angle, Plus, Circle, Minus, Square, Custom(upload own SVG icon or choose one from the library).
Expand submenu position – specify the position where the submenu will be displayed. It can be Top(over the main menu) or Bottom(under the main menu).
Submenu pointer – select one of the available pointers for the menu items on hover. The available options: Underline, Overline, Double line, Framed.
Animation – specify one of the available animations for the submenu items: Grow, Shrink, Slide up, Slide down, Fade, None. The option allows specifying the easing(Ease, Ease-in, Ease-in-out, Linear), duration, and delay.
Style tab
On the style tab, you can manage the element styles of the responsive navigation like menu item colors in different states, size, typography, borders, padding/margin, etc.
Menu item/WP menu item/WP menu submenu item
Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Indicator color – select the icon color of the menu indicator.
Indicator spacing – the setting allows managing the spacing of the current element in different units(px, %, em) for desktops, tablets, or phones.
Indicator click area – specify the click area in different units(px, %, em) for desktops, tablets, or phones.
Submenu indicator size – specify the icon size of the menu indicator for desktops, tablets, or phones.
Submenu indicator rotation – specify the rotation angle of the indicator for different devices.
Space between items – the setting allows managing the spacing between the menu items in different units: px, %. The option is available only for the Menu item section.
Typography – this group of settings controls everything about typography: font size, font weight, line height, decoration, and other parameters.
NORMAL/HOVER/ACTIVE
The menu style settings for different states.
Color– specify the font color and opacity for the text of the current block using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Submenu/WP menu submenu
Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Offset – x – specify the x-offset of the submenu in various units: px, % for different devices.
Offset – y – specify the y-offset of the submenu in various units: px, %
for different devices.
Submenu width – specify the width of the submenu in different units(px, vh, vw) for desktops, tablets, or phones.
NORMAL/HOVER
The submenu style settings for different states.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Border Radius – specify the radius of the current block items for all devices or separately for desktops, tablets, or mobiles.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Toggle style/Close toggle style
The display styles block of the responsive navigation for the mobiles.
Mobile menu toggle
Margin – the setting allows managing the margin of the current element in different units(px, %) for desktops, tablets, or phones.
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Toggle size – specify the size of the mobile toggle using a slider.
NORMAL/HOVER
The toggle style settings for different states.
Color– specify the font color and opacity for the text of the current block using the color picker.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.
Mobile menu
Padding – the setting allows managing the padding of the current element in different units(px, em, %) for desktops, tablets, or phones.
Background Type – the setting changes the background of the current block. You can choose a color, gradient, or background image.
Border Type – select one of the available border types (solid, double, dotted, dashed, groove) for the current box and adjust the width, color, and radius according to your needs. Pick “None” to remove the border.
Box Shadow – the setting creates a shadow from the current block and it can be adjusted according to your needs specifying color, blur, horizontal and vertical shift.