You will notice at the bottom of the NOO Menu setting page, there’re two link buttons: ‘Clear all setting’ and ‘Disable NOO Menu’ these option is used for reset all NOO Menu setting or disable NOO Menu completely. If NOO Menu is disabled, your menu will use original structure and styling of your theme.
On NOO Menu, there’re two menu views for structure and styling. The reason for two views is that you’ll need a plain view with structure annotation for changing the structure of the menu, and you also will need to see how the menu actually look in real time when changing the style.
There is one button for switching between STRUCTURE and PREVIEW, it’s locate on the top right of the setting page.
For more information, please see the detailed post for structure and preview:
After installation, check out the Appearance Menus Screen you will see one single button to access our NOO Menu. Click it to access the NOO Menu setting.
One of the thing we try to achieve with NOO Menu is group all the options available in one place so that you don’t have to repeatedly open and add option for each menu item. Here you can see that we manager to add all the options to one place
Preset Style is the first thing you should check when you start using our NOO Menu. Below is the list of all the preset style included in this version.
 |
|
This option has to working situation:
To access this option, click on menu that you want and select this option.
You can add new column or row for a selected column/row 
You can group submenus of any menu item by selecting the menu item then enable option “Group”. 
Select each newly created column/row (aka. blank sub item), you’ll see the option to select or add widget. For selecting, only select from dropdown list. 
If you want to add new widget, select Add widget: 
A popup will display for you to select widget. Then just follow the option to create new widget for your menu item.
This option allow you to divide submenu into columns, just select the Position option to move menu item between columns. 
You can set a fixed width for each and every submenu:
For the column, our menu based on 12 columns grid so you can set each column a width of 1 ~ 12:
Each menu item can has its own icon. We only support Awesome Font icons and you can input the icon class or click the select link to choose icon from popup.
In this section, we’ll show you how to use NOO menu to create new menu structure. The structure here is what you can’t do with normal WordPress menu: you can divide your submenu into columns and rows as well as adding widget to your menu.
Before you start, you should know about the 3 levels of configuration, they are the option sets that will show to you when you choose the corresponding levels on your menu. We have 3 levels:
First we’ll give you the quick look at which options available for each level, then there’re real user cases of how to using NOO Menu to create a Mega Menu.
The Submenu setting will be display when you select the submenu on the toolbox. In the picture bellow, you can see that the submenu has light yellow background and you can trigger the submenu setting when select the most outer boundary of the submenu.
In this level of configuration, you can add rows to your submenu, set the width and change the alignment of your submenu:
The Column setting will display when you select one column of your menu. The column is the group of menu items display in a vertical list, and you can see there is a boundary line for each and every column.
In this level of configuration, you can: Add and remove column, set width of each column and add widget to column.
The Menu item setting will display when you select one menu item, either it’s the top level or the sub-level menu item. You can easy spot the menu item because it is the inner most boundary wrapping a Menu label or a widget.
In this level of configuration, you have some setting for the item like: add Icon or add caption (sub-title) for the item. Moreover, you also have control for sub items of the current menu item: enable/disable sub items as well as group the sub items to the current item so that they’ll always be displayed.
As you probably known when using a menu, every menu has 3 common elements:
Also with each menu item, either Top Menu item or Sub Menu item, there is two states:
Base on that common knowledge, we defined our styling options to five sections:
In each section, you have many (may be too many) options for styling your menu. Those options are ranging from basic style like background, height, font… to the advanced style like: box-shadow, text-shadow…
This section contain various styling options for your Menu Bar, those are options like height, border, background or shadow…
Before you start settings, please see this picture for better understanding about the Menu Bar styling:
You’ll see the options for Menu Bar like on this picture:
This section contains the options for styling all the top level items of your menu.
Like with Menu Bar, please look at below picture for better understanding about the Top Menu styling:
You’ll see the options for Top Menu like on this picture:
This section contains the options for styling your top menu items when on hover state.
You’ll see the options for Top Menu Hover like on this picture:
This section contains the options for styling the Sub Menu box and the Sub Menu items of your menu.
This section contains the options for styling the Sub Menu items when on Hover state. You will see that all the options here are similar to that of Top Menu Hover.
This option allows you to add custom CSS style to the menu. If you want to change the general style of NOO Menu, please look at our Basic Structure & Class to know how to add correct custom css. Also you can add style for the extra class you added to each Sub Menu, Column and Menu Item.
