Skip to content

# Header

Electro has 6 header styles.

## Header Styles

### Header v1

Header v1

### Header v2

Header v2

### Header v3

Header v3

### Header v4

Header v4

### Header v5

Header v5

### Header v6

Header v6

### Handheld Header v1

### Handheld Header v2

## Header Components

### Top Bar

Output

Top Bar Left Setting:

Top Bar Right Setting:

Top Bar style remain same for all Headers. It has two sections: a left-hand (#menu-top-bar-left) and a right-hand section (#menu-top-bar-right). In our theme, top bar includes Custom Links on left side and page links with icons on right side.

You can edit the Top Bar from Appearance > Menus > Edit menus and choose “Top Bar Left” or “Top Bar Right”.

### Header Section

Output

Settings

Header v1 and Header v2 have the same header style with three elements: Header Logo, Navbar Search Form and Navbar Icons with Mini cart.

- Header Logo – To upload Logo image, navigate to Electro > Header > Your Logo here upload your logo.

- Navbar Search Form – It is on the middle of the header that enables users to search your site easily.
- Navbar Icons – Activate YITH WooCommerce Wishlist and YITH WooCommerce compare plugin to display those two plugin functionalities in header.
- Mini Cart – Make sure Catalog mode is enabled in Electro > Shop > Catalog Mode to display Mini Cart Icon in header.

### Sticky Header

Output

Settings

Sticky Header is available for all header style. Once you’ve chosen those headers you can enable sticky header from Electro > Header > Sticky Header. This Sticky Header option allows the search bar to be sticky on scroll. Sticky Header setting image:

### Primary Navigation

Output

Settings

Primary Navigation is the main menu for the theme and it allows to present a site structure for the users. You can edit the Main Menu from Appearance > Menus > Edit menus and choose “Main Menu”.

### Vertical Menu

Output

Settings

Vertical menu allows you to list all of your website menu’s along the side of the page, while in a horizontal menu many of the website menu’s are hidden from view in drop down menus. This makes vertical menus easier to scan and a great option for long, single-page websites.

You can edit the Vertical Menu from Appearance > Menus > Edit menus and choose “Vertical Menu”.

### Mobile Handheld Department

Output

Settings

### Header Support Info

Output

Settings

To Customize Header Support Info, navigate to Electro > Header > Show Header Support Block here turned ON the option and enter Support Number and Email to show the details in Header Support Block.

### Navbar Primary

Output

Settings

Navigation menus allow you to present a site structure to your users. They help users find information and browse through different sections of your website. Since navigation menus are so important, they are usually placed close to the header in most WordPress themes.

In Electro theme, You can edit the Navbar from Appearance > Menus > Edit menus and choose “Navbar Primary”.

## Choosing a Header Style

Header v2 is chosen by default header. To change the header style :

1. Navigate to Electro.
2. Click on Header Tab.
3. You will find Header Style option with Header v1, Header v2, Header v3, Header v4, Header v5 and Header v6 as six choices presented as dropdown.
4. Choose the dropdown that represents the style of your choice and click on Save Changes.

###### Contents

- Welcome
- Getting Started
  - Introduction
  - Whats new in 2.0 ?
  - Upgrading from v1.x.x
  - 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 Page Template
    - Home v1 via Visual Composer
  - Home v2
    - Home v2 via Page Template
    - Home v2 via Visual Composer
  - Home v3
    - Home v3 via Page Template
    - Home v3 via Visual Composer
  - Home v4
    - Home v4 via Page Template
    - Home v4 via Visual Composer
  - Home v5
    - Home v5 via Page Template
    - Home v5 via Visual Composer
  - About
  - Contact v1
  - Contact v2
  - FAQ Page
  - Terms & Conditions
  - Store Directory
- 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
- Navigation
  - General Guidelines
  - Menus & Locations
  - Creating Megamenus
- Theme Options
  - General
  - Shop
  - Header
  - Footer
  - Mobile
  - Navigation
  - Blog
  - Social Media
  - Styling
  - Typography
  - Custom Code
- 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
- Customisations
- FAQ