How to Configure the Very Top Bar in Hestia

Table of Contents

  1. Enabling the Very Top Bar section
  2. Available Options
    1. The Very Top Bar menu
    2. The Very Top Bar widget area
  3. Changing the colors
  4. Layout and alignment
  5. Examples


1. Enabling the Very Top Bar section

The first step to configure the Very Top Bar in Hestia is to activate it from Customizer. 

Navigate to  Header Options > Very Top Bar and uncheck the "Disable section" option. The section is disabled by default.

2. Available Options

By navigating to  Header Options > Very Top Bar you will find the following options:

  • Option to enable/disable the section
  • The Very Top Bar menu ( a )
  • The Very Top Bar widget area ( b )

The premium version of the theme,  Hestia PRO offers some extra options you can use to customize the Very Top Bar section.

  • Options for changing the colors
  • Alignment option

a. The Very Top Bar menu

The Very Top Bar menu can be selected directly from  Header Options > Very Top Bar or from the admin area like any other menu ( Appearance > Menus and check Very Top Bar Menu )

In this menu you can add:

  • contact details like e-mail and phone number (preceded by icons)
  • social media icons (display only icons)
  • normal links

Note on how to set up Contact information in the Very Top Bar menu

E-mails and phone numbers will be preceded by icons only if the links are preceded by tel: and mailto: in the URLs, otherwise, they will be displayed as normal links.

tel:1-800-123-4567

mailto:friends@themeisle.com

The contact information written above will appear like this:

Social media icons

The external links to social media account will be displayed only as icons in top bar menu. The icons supported right now are:

  • Facebook
  • Twitter
  • Google+
  • LinkedIn
  • Instagram
  • Pinterest
  • Youtube
  • Dribbble
  • Behance
  • DeviantArt
  • GitHub
  • Tumblr
  • Snapchat
  • Reddit
  • Vimeo

b. The Very Top Bar widgets area

In  Header Options > Very Top Bar, you can add widgets in the widget area. Any widget can be used in this widget area, but for proper display, we recommend using one of the following widgets:

Recommended widgets for the Very Top Bar widgets area:

  • Custom menu
  • Categories
  • Search
  • Text
  • WooCommerce Cart
  • WooCommerce Product Categories
  • WooCommerce Product Search

3. Changing the colors [PRO only]

In  Header Options > Very Top Bar, you also have options for changing the background color of the entire section as well as the text and links colors. There is nothing complicated, just have fun with the colors :)

4. Layout and alignment [PRO only]

Very Top Bar layout is composed of a menu and a widget area. By default, the menu it's positioned on the left side while the widget area is on the right. In  Header Options > Very Top Bar, you also have an option to change this layout.

Note: Only the area on the left side will be displayed on mobile devices (responsive mode).

Displaying only menu/widget area

If you want to have only one of the areas ( menu or widget area ) you need to just don't select a menu for the Top menu location or don't add widgets in the corresponding widgets area.

5. Examples

a)

Right: Top bar menu (contact information and social media links)

b)

Left: Top bar menu (contact information)
Right: Custom menu widget (social media links)

c)

Left: Top bar menu (social media links)

d)

Right: Custom menu widget (e-commerce useful links)

e)

Left: Top bar menu (contact information)
Right: Custom menu widget (e-commerce useful links)

f)

Left: Top bar menu (contact information and social media links)
Right: WooCommerce Product Categories widget

g)

Left: Text widget (simple text)
Right:(links and contact information)

h)

Left: Top bar menu (contact information)
Right: WooCommerce Cart and WooCommerce Product Search widgets

i)

Left: Top bar menu (social media links)
Right: Search widget

j)

Right: Categories widget (with show post counts option checked)