How to Configure Vertical Mega Menu in Sj JMart Template

The responsive Joomla template - Sj JMart comes with lots of amazing features that help you easily and quickly build an online store. Specially, Sj JMart supports vertical mega menu by using Sj Mega Menu Joomla module then you can show various content in your menu from links, custom Html, modules, banners...

In this article, we will show you how to configure the Vertical Mega Menu as same as the Sj JMart template demo step by step. By understanding how to custom in Sj JMart Joomla website template, you can custom, create your own vertical menu for your website with this Joomla template.

1. Create "Vertical Menu LTR" Menu

Go to "Menus" » "Manage" » "Add New Menu". Create "Vertical Menu LTR" menu.

2. Install & Config Sj Mega Menu Module

• Install Sj Mega Menu Joomla extension.
• Go to "Extensions" » "Modules" » Find "Mega Menu" » Select "Sj Menu Menu" module, rename to "Vertical Menu LTR" to distinguish to vertical mega menu on RTL layout.
• Config the module as below images.

3. Create & Config Custom Html Modules

As the Sj JMart Joomla theme demo, we need to create 4 custom Html modules then display them in Vertical Menu LTR's sub-menus. To create custom Html module, go to "Extensions" » "Modules" » "New" and choose "Custom" type and use these code snippets.

3.1: Custom Html - Vertical menu 1

mobile & tablet
Mobile / Accessories Tablet / Accessories




Headphone
Computer Headsets Headphone Earpads




USB & HDD
Mobile / Accessories Tablet / Accessories




LAPTOP
Computer Headsets Headphone Earpads




Sound
Bluetooth Speakers  Wireless Speakers 




Video & Camera
Computer Headsets Headphone Earpads




CELL & CABLE
Bluetooth Speakers  Wireless Speakers 




Case & accessories
Computer Headsets Headphone Earpads

3.2: Custom Html - Vertical menu 2

Hot! Best Seller
New! New Arrival
Sale! Special Offer


Men fashion

Men Deal
Footwear
Bags & Luggage
Clothing
Men's Grooming
Watches
Accessories
Fragrances
Eyewear

View More



women fashion

Ethnic Wear
Footwear
Western Wear
Eyewear
Handbags & Clutches
Perfumes & Fragrances
Watches
Fashion Jewellery
Precious Jewellery
Fashion Accessories
Gold Coins & Bars

View More



Western Wear

Outerwear & Jackets
Cardigans & Pullovers
Sweatshirts
Shrugs & Waistcoats
Tops & Tunics
Dresses

View More

Handbags

Handbags
Wallets
Utility bags

View More

3.3: Custom Html - Vertical menu 3

Ethnic Wear
Footwear
Western Wear
Eyewear
Handbags & Clutches
Perfumes & Fragrances
Watches
Fashion Jewellery
Precious Jewellery
Fashion Accessories
Gold Coins & Bars

3.4: Custom Html - Vertical menu 4

Men Deal
Footwear
Bags & Luggage
Clothing
Men's Grooming




Ethnic Wear
Footwear
Western Wear
Eyewear
Handbags & Clutches




Watches
Fashion Jewellery
Precious Jewellery
Fashion Accessories
Gold Coins & Bars

4. Config "Vertical Menu LTR" Menu

Go to "Menus" » "Vertical Menu LTR" » "Add New Menu Item" to create sub-menus for "Vertical Menu LTR" menu.

4.1: Menu "Electronics"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

4.1.1: Menu "Fashion"

• Menu Item Type: Category (then select the category you want to show)
• Menu: Vertical Menu LTR
• Parent Item: Electronics

4.1.2:  Do the same with "Beauty", "Jewelry & Watches" and "Smartphones & Tablets" menus.

4.2: Menu "Smartphones & Tablets"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 2" module.

4.3: Menu "Health & Beauty"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 4" module.

4.4: Menu "Computers & Networking"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 1" module.

4.5: Menu "Jewelry & Watches"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

In "Sj Mega Menu: Options" Tab: Drag & drop the "Custom Html - Vertical menu 3" module.

4.6: Menu "Toys & Hobbies"

• Menu Item Type: URL
• Menu: Vertical Menu LTR
• Parent Item: Menu Item Root
• Set menu icon in "Link Type" » "Link Image"

Do the same with the other menus which do not contain module.

Now, you have already had a beautiful vertical mega menu as the Sj JMart eCommerce Joomla template demo.

Not only the Sj JMart template supports vertical mega menu, but lots of our Joomla templates also include vertical mega menu. You can use this guide to set up vertical menu in other Joomla themes using Sj Mega Menu module as well.

Thanks for reading!