MegaMenu
The Mega Menu by default is included in the Nitro theme. With this plugin, you can build the menu with different content layouts and elements included.
Here’s Mega Menu with item “Features” on Nitro demo site.
Enable Mega Menu
Step 1: Go to Dashboard > Appearance > Menus, then pick a menu that you want to use MegaMenu.
Step 2: Click “Settings” to open Settings screen for that menu.
Step 3: Check “Enable MegaMenu” box to start using MegaMenu
Then you can see all settings for Mega Menu.
Note:A menu which is using Mega Menu always goes with a “green” light, so we can easily detect whether that menu has been enabled MegaMenu or not without getting into settings for each one.
Activate submenu on front-end
Normally, you’ll have to hover to show submenu on front-end. With this setting, the sub-menu will be static on your live site so you can see the changes more easily.
Step 1: Go to Dashboard -> Appearance -> Menus, then pick the menu you want to make changes to
Step 2: ClickScreen Options, checkCSS Classes box
Step 3: Choose the menu that you want to make static, now you’ll see another CSS Classes field. For example, here “Outfit” sub-menu will be static:
Step 4: Enter “active-menu” into the CSS Classes field and click Save Menu. When you see the live site, “Outfit” sub-menu will already be opened:
Mega Menu settings
A MegaMenu is composed of the following elements.
- First-level items: the menu labels on your live site
- Second-level items: the menu columns
- Third, fourth, fifth-level items: the column content
First-level items
Here are the settings
General settings
Options
- Width: there are 3 options “Full Container”, “Full Page”, or “Custom” (you can enter the width in pixel
- Layout: you can choose a layout rendered from the number of second-level items, or use custom format to define the width of each column comparing to the whole menu
- Background image & Background color: change background image and color for the menu
Icon
To add an icon to your menu item, go to Settings> Icon to choose the icon and its position.
For example, I want to add an icon to the item “Elements”, here are the settings:
Here’s what it looks like on your live site:
Permission
In this tab, you can choose to show MegaMenu to everyone, only logged out users, or only logged in users.
For logged in users you can choose which types of member that can see the Mega Menu’s content:
Second-level items
Here are the settings for second-level items:
- General: add element to your second-level item
- Icon: similar to first-level
- Permission: similar to first-level
General
To add an element, click on settings for second level items-> Add Element. The element will appear below the item name on your live site.
You can add 4 types of element allowing you to build various variations of menus for the shop:
- Text: add text or custom HTML for shortcodes, images, etc
- Sidebar (Widget): add a widget
Note:To add content for widgets, go to Dashboard > Appearance >Widgets.There are many premade widgets which can be used for sidebar(WooCommerce Sidebar, Primary Sidebar, Footer Area #1, etc.). You can also add your own sidebar.
- Products: add one or multiple products
- Product Categories: add one or multiple product categories
Third-level items
Here are the settings for third-level or lower items:
- Icon: similar to first-level
- Permission: similar to first-level
Customize Nitro with Child Theme
Purpose of Child Theme
For custom style changes, child theme is the best way to customize Nitro theme in your way.
A child theme inherits all the features and appearance of its parent theme.
When updating code changes in child theme, you won’t lose changes of code and data on parent theme when updating theme version.
Tips
In order to understand better Child theme, how to create and use it, please refer to the following tutorials:
Product Layout Builder
Apart from the standard settings, you can add other elements to your Product Details page. Here’s an example:
To activate Product Layout Builder, go to product editing page of a product that you want to use custom layout, then Enable Product Builder.
Then you’ll be able to add custom elements to your Product Details page by Visual Composer:
Note: You can only customize the bottom layout of the elements you add by Product Builder; to edit the wholelayout of the product’s details, you have to do it on Live Customizer.
All added elements will appear below the main Product Details secion.
For example, here’s your element in Visual Composer:
Here’s the element on the live site.
Page Options
If you want to change settings for a specific page, please go to page editting screen on your WordPress Dashboard. Here you can change page settings for:
General
In “General” tab, you can change settings as follows:
- Use Global Settings: disable all settings for page options. When enabled, this page will apply global settings as on Live Customizer
- Stretch Row And Content: stretch row and content to fit with browser window
- Select Header: pick up a header for this page. You can create new headers or add elements to page header on Header Builder.
- Content Width: change width for content section (in px, or in percentage)
- Gutter Width: change width between 2 columns
- Offset Width: change with for page offset
- Offset Background Color: change background color for page offset
- Enable Boxed Layout: using boxed layout for page. When enabled, you can also pick up page’s background on “Page Content” tab
Note: If you want to make changes for all pages, switch to “Pages” tab on Live Customizer
Page Title
In “Page Title” tab, you can change all settings for page title. In order to show settings for page title, you have to turn on page title first.
Options:
- Enable Full Width: enable full-width layout for page title
- Layout: pick up a layout for page title
- Show Breadcrumb: show or hide page breadcrumb
- Description: enter description text below page title
- Padding Top: change top padding for page title
- Padding Bottom: change bottom padding for page title
- Min Height: change minimum height for page title
- Heading Style: change text style for page title
- Heading Text Size: change text size for page title
- Heading Line Height: change height for page title line
- Heading Letter Spacing: change letter spacing for page title
- Description Style: change text style for description text
- Description Text Size: change text size for description text
- Description Line Height: change height for description text line
- Description Letter Spacing: change letter spacing for description text
- Normal Color: change normal color for page title
- Link Color: change color for page title when it goes with a link
- Background Color: change background color for page title
- Background page: change background image for page title
- Background Position: change position for background
- Background Repeat: choose to repeat page title’s background or not And if yes, which style for background repeat
- Background Size: change image size for background
- Background Attachment: change sticky style for background image
- Parallax Background: turn on parallax effect for page title’s background
- Mask Overlay Color: change mask overlay color for page title’s background
Page Content
In “Page Content” tab, you can change all settings for main body content area.
Options:
- Sidebar Layout: change sidebar layout for page content
- Inner Background Color: add background color for main body content
Some options only visible when enabling “Boxed Layout” on General tab
- Outer Background Color: set outer background color for main page content
- Outer Background Image: choose outer background image for main page content
- Background Position: pick up a position to display background on main page content
- Background Repeat: choose to repeat background or not on main page content
- Background Size: pick up a background size style for main page content
- Background Attachment: pick up a background attachment style for main page content