General Guidelines – Electro Documentation

Skip to content

# General Guidelines

To create a new menu :

1. Navigate to Appearance > Menus.
2. Click on Create a new menu, give the menu a name.
3. Now to the left are available menu items that can be added to the screen, check the items you want to add and click on Add to Menu button.
4. The items are now added to Menu, you can then sort and lay the menu items in levels by drag and drop.
5. Click on Save Menu.
6. After you have saved the menu, hook the menu to any of the available Electro Nav menu locations.

### Theme Locations in Electro

Electro has ten navigation menu locations. They are :

1. Off Canvas menu
2. Top Bar Left
3. Top Bar Right
4. Primary Nav
5. Navbar Primary
6. Secondary nav
7. Departments Menu
8. All Departments Menu
9. Blog menu
10. Mobile Handheld Department

### Enabling CSS Classes Field, Static Content Blocks & Product Category Menu options

By default CSS Classes field, Static Content Blocks and Product Categories menu items may not be available. The will have to be enabled. To enable it please click on Screen Options at the top right screen of Appearance > Menus page. In the pull down menu that appears, check CSS Classes in Show Advanced menu properties. Please also check Static Content Blocks and Product Categories in Boxes. We’ve explained it in the screenshot below.

Enabling Static Content Blocks, CSS Classes and Product Categories from Screen Options

### Add Icons to Menu items

Output

Settings

1. Navigate to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the Icon Class text box, enter the icon name as you wish.for ex: ec ec-map-pointer.
4. Click on Save Menu.

### To make the Menu Item Red in Color:

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter highlight. This will make the menu item RED color in Secondary menu.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

### To make the Menu Item as Highlight or Bold

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter highlight. This will make the menu item as BOLD.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

### Split the Menu Item in right side

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter pull-right. This will make the menu item to float in right side.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

### Making the megamenu dropdown as full-width

Output

Settings

The megamenu now looks advanced and neat. What if we want the megamenu to be full width ? It is easy.

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter yamm-fw. This will make the subitem extend to full width of the container.
4. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
5. Click on Save Menu.

### Making the megamenu dropdown as 3 Half of the width

Output

Settings

1. Go back to Appearance > Menus.
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter yamm-tfw.
4. This will make the subitem extend to 3 half-width of the container.
5. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
6. Click on Save Menu.

### Making the megamenu dropdown as half of the width

1. Go back to Appearance > Menus
2. Click on the caret on the top-right of menu item that contains the megamenu subitem to expand it.
3. In the CSS Classes text box, enter yamm-hw.
4. This will make the subitem extend to half of the container.
5. If the CSS Classes field is not visible. Click on Screen Options on the top-right corner of the screen and check on CSS Classess under Show advanced menu properties.
6. Click on Save Menu.

### Adding Class Name for Single Image which extend outside of the content area in Vertical Menu

Output

Settings

1. Navigate to Static Content > Add New.
2. Give it a title, lets say “Mobiles & Tablets Megamenu 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 Mobiles & Tablets Megamenu Item.
4. Mobiles & Tablets Megamenu Item has 2 rows.
5. First row has Single Image Setting. Here is the screenshot for Single Image Setting.

6. On the Row settings of the Single Image Block, add the class name bg-yamm-content in Extra Class Name option. Here is the screenshot for your refenece

7. In Single Image Setting upload the image and remember to add the class name bg-yamm-extend-outside in Extra Class Name Option which makes the image to extend outside of the Menu Container. Here is the screenshot for the reference

###### 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