01

02

........................................................................................................................................................ 1

Installation Process ............................................................................................................................. 3

Instructions for Installation ............................................................................................................. 4

1. Installation via composer ........................................................................................................ 4

2. Manual Installation ................................................................................................................. 5

3. Database ................................................................................................................................. 5

Instructions for Setup/Configuration .............................................................................................. 6

General Configuration ................................................................................................................. 6

Module Enable/Disable ........................................................................................................... 6

Menu Breakpoint .................................................................................................................... 6

Mobile Menu: Type ................................................................................................................. 7

Mobile Menu: Page Dim ......................................................................................................... 8

Mobile Menu: Direction .......................................................................................................... 8

Mobile Menu: Parent Link ...................................................................................................... 8

Mobile Menu: Parent Link Prefix ............................................................................................ 8

Desktop Menu: Mouse Event ................................................................................................. 9

Desktop Menu: Animation ...................................................................................................... 9

Custom CSS ............................................................................................................................. 9

Menu Builder .................................................................................................................................... 10

Instructions for Building your Menu ............................................................................................. 11

Adding a New Menu Item ..................................................................................................... 11

Warning Notification Messages ............................................................................................ 15

Preview before pushing LIVE ................................................................................................ 15

Autosave / Restore................................................................................................................ 15

Removing a Category or Static Block referenced in the Navatron ....................................... 15

Magento Version ........................................................................................................................... 16

Support.......................................................................................................................................... 16

Contents

03

Installation Process

04

1. Installation via composer

You can install the extension via System > Web Setup Wizard > Extension Manager like

other extensions in the Marketplace. You will need to have your access keys on hand as

you will be prompted to enter them.

1. Select Review and Install, select the module to install and follow the Setup Wizard

2. In the CLI (Command Line Interface) the following needs to be entered

composer require nublue/navatron

3. Enable Module

To get the module to appear in your Magento instance it needs to be

enabled. To do this via the CLI you need to run:

php bin/magento module:enable Nublue_Navatron

Then, to upgrade the module you need to run:

php bin/magento setup:upgrade

Finally, to compile run:

php bin/magento setup:di:compile

Instructions for Installation

05

2. Manual Installation

1. Download the Files

Download the files from Magento Marketplace.

2. Place the Downloaded Files in the app > code Folder

In the app > code folder (If you do not have the code folder, then you will

need to create it), place the extension folder and files into this. If the files are

zipped, they will need to be extracted before placing in app > code.

When successful, you should see the following structure:

app > code > Nublue > Navatron > Module Folders

3. Enable Module

To get the module to appear in your Magento instance it needs to be

enabled. To do this via the CLI you need to run:

php bin/magento module:enable Nublue_Navatron

Then, to upgrade the module you need to run:

php bin/magento setup:upgrade

Finally, to compile run:

php bin/magento setup:di:compile

3. Database

During installation the extension creates default data. Configuration for the extension can

be found in the core_config_data table, the eav attributes made for the extension can be

found in the eav_attribute table and it creates a custom table in the database called

Nublue_Navatron.

06

General Configuration

General Configuration can be found in the Stores > Configuration > NaVAtron > Global

Options menu in your Magento admin panel.

These are the main settings for the NaVAtron, to enable/disable it on the frontend, as well

as the global styles and animation for the mobile and desktop version of the menu.

Module Enable/Disable

To enable/disable the module (to show or hide the NaVAtron on the frontend – on your

website), you can either select ‘Yes’ or ‘No’ from the Enabled dropdown that appears in

Stores > Configuration > NaVAtron.

Selecting ‘Yes’: On the frontend, the NaVAtron menu will appear across your site.

Selecting ‘No’: On the frontend, the NaVAtron will not show anywhere until the extension is

enabled again.

Note: Disabling the module via the General Configuration does not remove the module

files from app > code. For this you will need to use module:disable Nublue_Navatron via the CLI. If

you then need to enable the module again, then you will need to follow Step 3 from

the Installation Process.

Menu Breakpoint

A text field to specify the point (the width of the browser window or device) at which the

NaVAtron menu changes from the Desktop version to the Mobile version.

Instructions for Setup/Configuration

07

The following group of settings are specifically for the Mobile version of the NaVAtron:

Mobile Menu: Type

Choose the type of menu for the mobile version of NaVAtron:

Flyout Panel: The menu will have a flyout animation which displays only the current

category on the menu at one time, see below left.

Accordion: The menu will have an accordion animation which displays the full menu, initially

collapsed, where you can expand each section to reveal it’s sub-categories, see below right.

Choosing the Accordion option will display 4 extra settings:

Accordion Duration: the speed at which the accordion menu opens the sub-menu.

Accordion Single: ‘True’ allows only one sub-menu accordion to be open at one time. ‘False’ allows

multiple menus to be open at the same time.

Accordion Scroll: ‘True’ scrolls to the top of the opened accordion.

Accordion Scroll Offset: in pixels, the height above the opened accordion to which the menu will

automatically scroll to, providing Accordion Scroll = True. For example, 0 = will scroll to the top of the

opened menu ‘Jewelry’ (left) and 100 = will scroll to 100px above the opened menu (right).

08

Mobile Menu: Page Dim

The option to dim the background behind the menu when it is active. True = the background

is dimmed (left) or False = the background remains fully visible (right).

Mobile Menu: Direction

The direction from which the menu opens, either from the left or right-hand side.

Mobile Menu: Parent Link

Choose whether or not to display the ‘Parent’ category link. In the example below, True =

will show the ‘Go To Men’ category link and False = will hide this link.

Mobile Menu: Parent Link Prefix

Related to the above setting, this free text field determines what is displayed before the

parent link, providing this setting is enabled above. In the example above, the text here

would be ‘Go To’.

09

The following group of settings are specifically for the Desktop version of the NaVAtron:

Desktop Menu: Mouse Event

Choose the type of mouse event required to open the dropdowns on the Desktop menu,

either: Hover over the menu to open or Click the menu to open.

Desktop Menu: Animation

Choose the transition animation for displaying the dropdown menus.

The last Global Setting is Custom CSS.

Custom CSS

This allows you to edit the CSS of the NaVAtron to customise it to suit the style and design

of your own website.

010

Menu Builder

011

The Menu Builder can be found in the Stores > Configuration > NaVAtron > Menu Builder in

your Magento admin panel.

This is where you can build your menu and make use of the drag & drop functionality to

organise your category structure. There are 5 different menu types you can choose from

when building your navigation; Category Link; CMS Page Link; Static Block (for including

promotional banners etc. within the navigation); Custom URL and Blank Link.

Adding a New Menu Item

To add a new menu item click the ‘New Menu Item’ button at the top of the page to reveal

the form. The main form fields are as follows:

Instructions for Building your Menu

012

Enabled: Yes = the menu item will be visible on the front-end of your website. No = the

menu item will not show on the front-end of your website.

Title: the title of your menu item, as it appears on the front-end of your website.

Parent Item: this defines where the new menu item is placed in the navigation. To add an

item to the main navigation bar you can add it to the Root parent item. To add an item to a

drop-down as a child item to a main menu item, add them to the relevant Parent Category.

Root Parent Item: If an item is added to the Root, 2 additional fields will show:

Desktop Drop Down Panel Width: This value determines how wide the drop-

down menu will be. If no value is entered, the drop-down will span the full

width. If a value is entered, an additional field will show called Desktop Drop

Down Position which determines whether the drop-down appears to the

right or left of the main menu item.

CTA Image: If added, this image appears to the right of the drop-down.

Child Sub-Menu Item: If an item is added to a parent item other than the Root (for

example Root/Men), one additional field will show called Container ID which is used

to separate the menu drop-down into columns.

If the menu is a direct child of the Root you can add a numerical ‘Container ID’. All

IDs that are the same will be grouped and stacked in the same column. For example,

if TOPS menu had container ID 1, TROUSERS menu had container ID 1 and SHOES

menu had container ID 2, the drop-down menu will be split into 2 columns with

TOPS and TROUSERS sharing column 1 and SHOES taking up column 2, like follows:

013

Menu Type: this determines the type of menu item that will be placed in your navigation,

from the following 5 options:

Category: this displays a link to the Magento Category, which can be chosen from

the additional Select Category field that appears when this menu type is selected.

CMS Page: this displays a link to a CMS Page, which can be chosen from the

additional Select CMS Page field that appears when this menu type is selected.

Static Block: this displays the content of a Static Block, which can be chosen from the

additional Select Static Block field that appears when this menu type is selected.

Custom URL: this allows you to enter any URL link, which can be specified from the

additional Custom URL field that appears when this menu type is selected.

Blank Link: this displays the text as a blank link within the menu.

Custom Class: this allows you to specify a custom class for your menu item.

The next fields on the form allow you to add a custom label next to a menu item:

Label Title: this is the text displayed on the label, for example ‘New!’.

Font Label Size: this is the size of the text displayed on the label.

Label Background Colour: this displays a pop-up colour choose to allow you to specify a

colour for the label.

Label Text Colour: this displays a pop-up colour choose to allow you to specify a colour for

the text on the label.

014

When a new menu item is added it is added to the table below:

Clicking the + icon next to a menu item will expand it to show the associated sub-menus.

Using the arrows you can drag and drop menu items to change their position in the menu.

When moving a menu item that has associated sub-menus, all sub-menus will move as well.

Also using the arrows you can drag and drop menu items to the left and right. Dragging a

menu item to the right makes it a child item of the menu item directly above it. Dragging a

menu item to the left makes it a child item or a parent item depending on what the

relationship between the menu items are.

015

Warning Notification Messages

When making any changes, a warning message will appear above the table to remind you to

save the config changes before navigating away from the page. When the config changes

are saved in the admin they are also updated on the front-end of your website.

These notification messages can be closed by clicking the cross to the right of the message.

Preview before pushing LIVE You can also Preview the changes on your menu before saving them and putting it live. This

can be done by clicking the Preview Live link next to the Save Config button. This will open

up another browser window with the Navatron menu on. The preview will automatically

update whenever a change is made.

Autosave / Restore Should any errors occur, such as with your internet connection or Magento session, a

Restore Last Session button will display above the table, allowing you to restore the menu

back to its last saved state.

Removing a Category or Static Block referenced in the Navatron

If you delete a category or static block that you have previously used within your mega

menu, a message will appear upon deletion to inform you that the link to this category was

removed from the Navatron and replaced with a blank link, giving you the specific menu

item/s affected (in this case the Test delete menu item).

This ensures your mega menu is still visible on the front-end, without errors.

Similar messages appear when deleting a static block that is referenced in the mega menu.

016

Magento Version

This extension works with Magento v2.1.x, v2.2.x and v2.3.x despite v2.1.x and v2.2.x and above

using different formats for storing data in the database (v2.1.x serialises data whilst v2.2.x and

above uses JSON). A Helper is used to compare the Magento version in the composer.json file

against a string, with the data being parsed according to how it is stored.

Support

If you require support, please contact our support team at extensions@nublue.co.uk