Header & Top Bar

Top Bar

Top bar (or top line) is thin bar above site header section (fig. 1). It can contain various useful information and functional blocks: contacts, custom menu, social icons, etc.

Fig. 1. What is Top Bar.

Fig. 1. What is Top Bar.

On the “WP-admin > Theme Options > Top Bar” page you can set:

  • Font size.
  • Font color.
  • Top and bottom paddings.
  • Various background settings.

 

Header

Header is a bar on the top of your site (below Top Bar, see fig. 1) that holds logo, main navigation menu, small info block, etc.

On this tab you can choose various background settings for header.

 

Main Menu

In block “Menu (first level navigation)” you can set:

  • Font.
  • Font size.
  • Font color.
  • Hover decoration style.
  • Hover decoration color.
  • Menu icon size.
  • Distance between menu items.
  • Menu height.

“Floating menu” block allows to:

  • Show/ hide floating menu.
  • Set its height.
  • Set its opacity.

 

Drop down menu

On this tab you can select:

  • Font.
  • Font size.
  • Make it uppercase.
  • Show next level (children menu items) indicator arrows.
  • Font color.
  • Hover font color.
  • Menu icon size.
  • Distance between menu items.
  • Menu background color.
  • Menu background opacity.
  • Menu background width.
  • Choose whether parent menu items will be clickable.

 

Layout

“Header layout” section, Armada allows you to select one from 4 different layouts (fig. 2.1):

  • “sidebar style” – logo and menu on the left side of the content;
  • logo on the left, menu on the right;
  • logo on the left, text block on the right, menu underneath on the left;
  • centered logo, centered menu underneath.
Fig. 2.1. Header layouts.

Fig. 2-1. Header layouts.

Depending on your layout choice, various sets of options that allows to tweak different nuances of appearance will be revealed. We will not describe them since their names are self-explanory, except one: header layout builder. This block is a bit different for each layout, but generally it will look like this (fig. 2.2):

Fig. 2.2. Header Layout Builder.

Fig. 2-2. Header Layout Builder.

Here’s the basic idea of how it works. On the right you have the “inactive elements” block. On the left – available holder-blocks in the top bar, header and menu area. So you can simply drag-&-drop desired elements to holders where you like them to be (see fig. 2.2).

Under “Header layout” section you will find blocks to set up:

  • WooCommerce shopping cart (if WooCommerce is installed)
  • Search
  • Contact information
  • Login
  • Text blok
  • Social icons

You can re-arrange the order of social icons by drag and drop

Re order social icons by  drag and drop

Fig. 3. Re-order social icons by drag and drop

Mobile header

On this tab you can set up responsiveness points for:

  • tablets (1st point);
  • phones (2nd point);

and which logo (mobile or desktop) to show on each of them. Also you can select a mobile menu color(s).