How to Install UB Mega Menu in UB MegaMall theme

This guide is aimed for one who needs to manually install UB Mega Menu in the UB MegaMall theme (Standard theme).

As you might know that our UB MegaMall theme for Magento 2 comes with two packages for your choice:

• Standard theme without built-in Magento 2 extensions
• Extended theme with all built-in Magento 2 extensions (including UB Mega Menu, UB Content Slider, UB Quick View)

If you purchased UB MegaMall (Extended theme), please head over to our full userguide for this package here instead.

Now let’s start with the manual installation of UB MegaMall (Standard theme) and UB Mega Menu extension.

Once you purchase UB MegaMall theme (standard theme) and UB Mega Menu, you can find the UB MegaMall QuickStart Without Extension and UB Mega Menu extension available for download in your profile at Ubertheme.com:

• Package 1: UB MegaMall QuickStart Without Extension -- Download here
• Package 2: UB Mega Menu extension -- Download here
• Package 3: Additional files for UB Mega Menu manual installation -- Download here (extract this zip file and follow guide below to learn when to use each file)

First, you need to install UB MegaMall (standard theme) using UB MegaMall QuickStart Without Extensions (if you are new to QuickStart installation, check out this guide).

Then, follow all steps below to install UB Mega Menu:

1. Install the module UB MegaMenu

You can install the module UB Mega Menu following a few simple steps in the file readme.txt (available in the UB MegaMenu download package).

If you wish to learn more about the configuration of UB Mega Menu, follow the full userguide -- UB Mega Menu Documentation

2. Disable the static block UB Categories

In the Magento Admin Panel, navigate to Content | Blocks | Setting | UB Categories, switch the toggle to disable the block:

3. Upload the files (from the Package 3 in section II -- Prepare Installation)

• Upload the folder Ubertheme_UbMegaMenu to app/design/frontend/Ubertheme/megamall

• Override the file _navigation.less in app/design/frontend/Ubertheme/default/megamall/web/css/source

4. Edit the styles in the _module.less file

Open the file app/design/frontend/Ubertheme/megamall/default/Magento_Theme/web/css/source/ _module.less, then delete the styles from the lines 300 to 638:

5. Create the ub-left-menu static block

In your admin dashboard, click Content | (Elements) Blocks | Add New Block, then create ub-left-menu block with the configuration as follows:
Back-end setting

<div class="ub-mega-menu-vertical">
<h3 class="ub-mega-menu-title">Categories</h3>
{{block class="Ubertheme\UbMegaMenu\Block\Menu" name="ub-left-menu" menu_group_id="1" menu_key="ub-left-menu"}}
</div>

6. Edit Homepage contents

In the Admin Panel, navigate to Content | Elements | Pages | (Select Home Page) Edit.
Find the following code in the “Design” field:

<block class="Magento\Cms\Block\Block" name="ub-categories">
<arguments>
<argument name="block_id" xsi:type="string">ub-categories</argument>
</arguments>
</block>

Replace such code with:

<block class="Magento\Cms\Block\Block" name="ub-left-menu">
 <arguments>
 <argument name="block_id" xsi:type="string">ub-left-menu</argument>
 </arguments>
</block> 

7. Import data for your MegaMall store (using phpMyAdmin).

You import the db-sample-megamenu.sql file to your database

8. Delete the folder

Navigate to the root folder, delete all files/folders in the pub/static and var/ (except for the file .htaccess)

9. Run the following command:

• php bin/mageno setup:static-content:deploy

10. Then you should see the front-end appearance

• UB Top Menu

• UB Left Menu