Creating Megamenus – Electro Documentation

Skip to content

# Creating Megamenus

## Building Megamenu Dropdown

Electro supports Megamenu Dropdown, with the help of two plugins that comes bundled with the theme namely : Visual Composer plugin and Electro Extensions plugin.

### 1. Static Block Post Type

A megamenu item in Electro theme is a Static Block. This Static Block is available on activating Electro Extensions Plugin.

### 2. Enable Visual Composer for Static Block

- Navigate to Settings > Visual Composer.
- In Post Types under Role Manager tab , make sure custom is selected and static_block is checked.

- Go to Static Content > Add New and make sure it has a button just below the title with visual composer icon and text that reads Backend Editor.

### 3. Add a new megamenu item

1. Navigate to Static Content > Add New.
2. Give it a title, lets say “Pages Megamenu Item” item. The title is not used anywhere in displaying the menu.
3. Click on Backend Editor. It will display Visual Composer Backend Editor. We will use this back end editor to build our megamenu item.

4. Let us add a simple text block. Click on Add text block button and the result will look like this.

5. Click on Publish button.

### 4. Adding megamenu item as a submenu to a menu item

1. Navigate to Appearance > Menus.
2. On top right corner of your screen, you will find a dropdown menu Screen Options. Click on it.
3. In the dropdown that appears, check on Static Content Blocks under Show on screen. You will now see Static Content Blocks listed in the left side.

4. Choose the menu you want to edit. In my case I’ve chose a menu that is hooked to Primary Nav location.
5. Now check the Pages Megamenu Item and click on Add to menu.
6. Drag the Pages Megamenu Item box and drop it under any existing menu as a submenu.

7. Click on Save Menu.
8. Now the megamenu will is added as a submenu.

## Advanced Megamenu Dropdown

We built our simple Megamenu in previous section. We are now going to build a little complex mega menu using Visual Composer.

### Revisiting Test Megamenu Item Static Block

- Navigate to Static Content > Static Blocks.
- It should display the “Pages Megamenu Item” that we created from previous section.
- Click on edit and you should see an existing text block.
- Delete the text edit block by hovering over the block and clicking on the button which has the trash icon.

## A complex Megamenu Item

### 1. The Grid

- Our Complex Megamenu item will now have 4 columns.
- On the top-right of each row, you will find a grid icon, next to the move icon.
- Click on the grid icon and it will expand to various grid option available.
- We will select a predefined grid which is 1/4 + 1/4 + 1/4 + 1/4.
- Once you click on the predefined grid layout it will look like this :

### 2. Populating the Grid

- Visual Composer comes with lot of elements that can be added to the Grid.

Row 1 has 4 columns.

- Column 1 – Click on the Add button. It should popup Add Element button. Let us add WP Custom Menu widget under WordPress Widgets. I have already created a menu (via Appearance > Menus).
  - Widget Title :
  - Menu : Pages Menu #1 ( name of the menu created already)
- Column 2 – Click on the Add button. It should popup Add Element button. Let us add WP Custom Menu widget under WordPress Widgets. I have already created a menu (via Appearance > Menus).
  - Widget Title :
  - Menu : Pages Menu #2 ( name of the menu created already)
- Column 3 – Click on the Add button. It should popup Add Element button. Let us add WP Custom Menu widget under WordPress Widgets. I have already created a menu (via Appearance > Menus).
  - Widget Title :
  - Menu : Pages Menu #3 ( name of the menu created already)
- Column 4 – Click on the Add button. It should popup Add Element button. Let us add WP Custom Menu widget under WordPress Widgets. I have already created a menu (via Appearance > Menus).
  - Widget Title :
  - Menu : Pages Menu #4 ( name of the menu created already)

### 3. How does the Grid look after populating ?

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Whats new in 2.0 ?
  - Upgrading from v1.x.x
  - Installation
    - Direct Download & Installation
    - Manual Download & Installation
  - Demo Content
    - One Click Demo Import (Recommended)
    - Manual Import
  - Updating the theme
  - Changelog
- Set Up Pages
  - Home v1 Mobile
    - Home v1 Mobile via Page Template
    - Home v1 Mobile via Visual Composer
  - Home v2 Mobile
    - Home v2 Mobile via Page Template
    - Home v2 Mobile via Visual Composer
  - Home v1
    - Home v1 via Elementor
    - Home v1 via Page Template
    - Home v1 via Visual Composer
  - Home v2
    - Home v2 via Elementor
    - Home v2 via Page Template
    - Home v2 via Visual Composer
  - Home v3
    - Home v3 via Elementor
    - Home v3 via Page Template
    - Home v3 via Visual Composer
  - Home v4
    - Home v4 via Elementor
    - Home v4 via Page Template
    - Home v4 via Visual Composer
  - Home v5
    - Home v5 via Elementor
    - Home v5 via Page Template
    - Home v5 via Visual Composer
  - Home v6
    - Home v6 via Elementor
    - Home v6 via Page Template
    - Home v6 via Visual Composer
  - Home v7
    - Home v7 via Elementor
    - Home v7 via Page Template
    - Home v7 via Visual Composer
  - About
  - Contact v1
  - Contact v2
  - FAQ Page
  - Terms & Conditions
  - Store Directory
  - Wishlist
  - Compare
  - Track your Order
- Blocks & Sidebars
  - Header
  - Sidebars
  - Footer
- Set Up Shop
  - Shop
  - Set Up Products
  - Product Attributes
  - Single Product Page
  - Cart
  - My Account
  - Checkout
  - Track Your Order
- Static Blocks
  - Introduction
  - Recommended Products Cards Carousel
  - Pages Megamenu Item
  - Accessories Jumbotron
  - Mobiles & Tablets Megamenu Item
- Navigation
  - General Guidelines
  - Menus & Locations
  - Creating Megamenus
- Theme Options
  - General
  - Shop
  - Header
  - Footer
  - Mobile
  - Navigation
  - Blog
  - Social Media
  - Styling
  - Typography
  - Custom Code
- Elementor Elements
  - Product Categories List With Header Image
  - Products 1-2 Block
  - Product Categories List
  - Product Categories Block
  - Product Carousel Tabs 1
  - Products 6-1 with Categories
  - Products with Categories and Image
  - List Categories Menus
  - Ads With Banners Block
  - Electro Products List Block
  - Electro Products Carousel 1
  - Electro Nav Menu
  - Electro Mobile Deals Product
  - Recently Viewed Products
  - Deals Products Block
  - Electro Deal Products Carousel
  - Electro Products Carousel with Category Tabs
  - Ad Block
  - Electro Brands Carousel
  - Electro Onsale Product
  - Electro Onsale Products Carousel
  - Electro Products Cards Carousel
  - Electro Products Carousel
  - Electro Team Member
  - Feature Block
  - Product 2-1-2 Grid
  - Product 6-1 Grid
  - Product List Categories
  - Products Carousel Tabs
  - Products Tabs
  - Slider with Ads Block
  - Electro Deal and Products Tabs
- Visual Composer Elements
  - Ads With Banners Block
  - Deals Products Block
  - Electro Mobile Deals Product
  - Electro Nav Menu
  - Electro Products Carousel 1
  - Electro Products List Block
  - List Categories Menus
  - Product Carousel Tabs 1
  - Product Categories Block
  - Product Categories List
  - Product Categories List With Header Image
  - Products 1-2 Block
  - Products 6-1 with Categories
  - Products with Categories and Image
  - Recently Viewed Products
  - Electro Deal Products Carousel
  - Electro Products Carousel with Category Tabs
  - Ad Block
  - Electro Brands Carousel
  - Electro Onsale Product
  - Electro Onsale Products Carousel
  - Electro Products Cards Carousel
  - Electro Products Carousel
  - Electro Team Member
  - Feature Block
  - Product 2-1-2 Grid
  - Product 6-1 Grid
  - Product List Categories
  - Products Carousel Tabs
  - Products Tabs
  - Slider with Ads Block
  - Electro Deal and Products Tabs
- Troubleshooting
  - Home Pages
    - Ads block settings is empty
    - Visual Composer does not work with Home pages
  - Installation
    - The link you followed has expired. Please try again.
- Customisations
  - Shop Page
    - Show Product availability in Grid view
    - Show Product thumbnail above product title and categories
    - Show Brand name in Shop Page
- FAQ
  - General
  - Installation & Updates
  - WooCommerce
  - Translations