Header

Electro has 3 header styles.

Header v1

Header v2

Header v3

null

Header Components

Top Bar

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”.

Top Bar Left Setting:

Top Bar Right Setting:

Output of Top Bar:

Header Section

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.

Output of Header Section

Sticky Header

Sticky Header is available only for header v2 and header v3. 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:

Output of Sticky Header

Primary Navigation

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”.Here is the Primary Navigation menu setting image:

Output of Primary Navigation

Vertical Menu

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”.

Output of Vertical Menu

Secondary Menu

To make the Menu Item Red in Color:

  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.

Output of Menu Item in Red Color

Split the Menu Item in right side

  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.

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

Output of Menu Item in Right

Header Support Info

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.

Output of Header Support Block

Navbar Primary

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”.

Output of Navbar Primary

Choosing a Header Style

Header v1 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 and Header v3 as three choices presented as dropdown.
  4. Choose the dropdown that represents the style of your choice and click on Save Changes.

Not quite what you are looking for ? Get Help