Introduction

About WR Mega Menu

WR Mega Menu is your easy way to turn existing menu into a customizable mega menu in your WordPress website. User friendly, highly customizable and responsive, WR Mega Menu is simple to get started but powerful to create highly customized and creative mega menu configurations.

If you’re down with CSS, you can style the menu to your heart’s delight via Styling option, uploading your own CSS file or add custom CSS style if you want.

Let’s scroll down!

Back To Top

Hot Features Overview

WordPress Compatibility

WordPress 3.6 or higher Compatibility

Natively compatible with WordPress 3.6 and higher version

wp-compatible

Back To Top

Intuitive Layout

Once installed, it’s located in the default WordPress main panel. To help you easily manage your menu, WR Mega Menu is designed with a simple and intuitive layout.

You can easily select what kind of content to be shown in the submenu without going back to the front-end.

1

Back To Top

Drag and Drop Layout

Drag and drop is a convenient functionality for creating element in WR Mega Menu. You can easily arrange columns, move page elements into another position and even resize columns using just your mouse. You can also use the “Move button” on the sidebar to move rows up or down.
2

                                                           Change width with mouse only.
3

Move menu elements between columns.

4

Switch between columns.

Back To Top

Easy To Customize

With this plugin, you can fully control your mega menu. You can customize the layout of your menu, change menu item background, font, etc. You can even switch between vertical / horizontal mode and make it sticky when scroll down.ig-menu-541

Back To Top

Built-in elements

We have created some predefined elements so you can choose the most suitable field and add as many elementsas you want for your site without any coding. Interestingly, you can easily search these elements with the Spotlight Filter

ig-menu-55.

 

Back To Top

Quick Start Guide

How to install WR Mega Menu Quick Start Package

After downloading, you will have an extension installation file called wr_megamenu_x. xx. zip. In which: x. xx is the version of the plugin
1. In WordPress administration, go to menu Plugin -> Add New

ig-menu-01

2. Click the Upload tab and browse for your installation file.

ig-menu-02

3. Choose Install Now. The installation file will be uploaded to your server and installed in WordPress automatically.

4

4. If everything is ok, the plugin will be installed successfully. Click Activate plugin and use it.

5

Or go to plugin -> Find WR Mega Menu plugin and click the “Activate” option.

6

Back To Top

Usage

 Set up a Mega Menu

After installing WR Mega Menu, you go to WR Mega Menu which appears on the Admin Bar and click on Add New.

7

In Add New Profile section, type your Mega Menu Name and click publish to show your Mega Menu.

8

Then choose Manage Locations, set up your Assigned Menu and save the changes. In some cases, themes supportmore than one menu, you will be able to choose other menu locations which will be indicated in the Theme Location column

9

After the above steps, come back to the WR Mega Menu tab on the Admin Bar, go to All profiles and select the Mega Menu you want to customize.

10

Back To Top

WR Mega Menu Layout

18

– Move Button: Allow users to arrange the position of rows
– Add Element: You can add unlimited number of menu elements or widgets into each row.
– Delete row: Allow user to remove undesired rows
– Edit row: Edit the setting of a row
– Add column: Allow users to add columns in a row

Back To Top

Edit and Style WR Mega Menu

In the styling system of WR Mega Menu, live preview on the right will help you easily edit and style your mega menu.
The menu bar includes Menu layout, Stick menu to top, Font, Background color, Background On Hover, Icon and Display Mode.

1. Menu Bar

1.1 Menu Layout
Help to rotate WR Mega Menu between X-axis and Y-axis by selecting Horizontal or Vertical, looking at the pictures below as examples.

11

12

1.2 Stick menu to top
If you choose “Yes”, your WR Mega Menu will be sticked to top.

1.3 Font
Inherit: Your font style will be taken from your original css file.
Custom: If you choose this function, two rows – Font face and Font attributes with two columns will appear.

Font face: Choose the font face displaying in your Mega Menu

usage-10

Font attributes: Resize texts and change text color

usage-11

1.4 Background color and Background hover color
You can change the background color and background hover color of the mega menu as shown below:

usage-12

1.5 Icon and Display

To add icons to your menu display, go to Appearance > Menus to choose icon. There are nearly 150 icons for you to choose.

13
If you want Icons to appear on WR Mega Menu, simply click on the button (Icon Only or Icon vs Text)

 

2. Submenu Panel

usage-141

2.1 Heading text and normal text

In this section, you have two options to choose:
Inherit: Your font styles will be taken from your original css file.
Custom: You can regulate font face and font attributes as menu bar

usage-15

2.2 Enable bullet icon
If the bullet icon is enabled, the narrow will be added to the submenu items with a little indent

 usage-16

Back To Top

 Drag and Drop Columns

Using drag and drop function in WR Mega Menu, you can easily arrange columns, move elements or widgets into another position and even resize columns. In addition, you can also use “Move button” on the sidebar to move row up or down.

menu-371

Back To Top

Menu Elements

 Enable Mega Menu Profile

In your menu profile, click “Turn on Mega Menu” to enable Mega Menu

14

After enabling Mega Menu, you will see the following UI

15

You can adjust the width of rows

3-a

You can choose to add menu elements: Image, Submenu and Text and widgets to your Mega Menu.

Back To Top

 Image

1. Content 1.1 Add Image menu-91 Choose picture to display: 16 – Image size: Set size for your image – Alt Text: Set alt text for the image – Caption: Set caption for the image 1.2 On Click WR Mega Menu supports 7 ways to set link type for image + No action + Show large image + Go to URL + Go to single post + Go to single page + Go to Category + Go to Tag 2. Appearance 17 2.1 Container Style You can set different container styles for images: menu-16 2.2 Alignment Style WR Mega Menu includes 4 options to display parent style: Inherit, Left, Center and Right. menu-17 2.3 Margin You can set top, bottom, right and left margin menu-18 2.4 Fade in Effect This parameter helps you set fade animations for Mega Menu menu-19 2.5 Advanced Options Advanced options allow you to add your own elements’ class or ID in order to style the menu menu-23

Back To Top

Submenu

1. Content

Choose All if you want to display all items in display

menu-25

Choose Custom and click on the Sub Item that you want to select

menu-26

2. Appearance

menu-27

menu-23

– Column breaking: you have 3 options to choose – Off, Item Per Column and No of Column
– Advanced: to add custom CSS Class and ID

Back To Top

 Text

1. Content

You will create your designed content by using the editor

menu-280 (1)

2. Appearance

2.1 Margin
Set or change margin-bottom, margin-top, margin-right, and margin-left.

menu-29

2.2 Enable Dropcap
– Capitalize the first letter in your text paragraph.
– Font face: support standard fonts and Goolge fonts
– Font attributes: set up size and style the Dropcop

menu-30

2.3 Other settings
– Line height:

– Advanced:

menu-23 (1)

 

Back To Top

Widget Elements

1. Add Widgets

Click on Add element > Select element > Add widgets. You can easily select existing widgets to add into columns and find them by using the Spotlight Filter

menu-33

2. Edit Widgets Settings

To edit the setting of a widget, you click on the Edit button of that widget

menu-34

A setting box will appear, allowing you to adjust the setting. For instance, when selecting the Widget Page, you can edit title, sort by, and exclude. In addition, you can preview the Widget as it would appear on the font-end.

menu-35

Back To Top

Support and Feedback

Feedback and Suggestion for our products

If you have any feedback or suggestions please let us know via forum here. Thank you!

 

Back To Top