How to Configure the Very Top Bar in Hestia

The Very Top Bar is the highest positioned section on the site, just above the navigation area, and is divided into two panels: General Settings and Appearance Settings.

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

• General Settings
  • Enable / disable the section
  • The Very Top Bar menu
  • The Very Top Bar widget area
  • Layout
• Appearance Settings
  • Colors

In this doc, we'll show you step-by-step how to configure the very top bar menu in Hestia. 

🗂️Table of Contents

✅ Enabling the Very Top Bar section

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

1

Navigate to Appearance > Customize > Header Options.

2

Open the Very Top Bar panel.

3

Uncheck the " Disable section" option. 

• The section is disabled by default.

📋The Very Top Bar menu

To add elements in the menu, navigate to  Appearance > Menus > Add menu items > Custom Links:

• in the URL - mention the link.
• in the link text - add the name / number.

There are two ways to configure the Very Top Bar menu:

• directly from  Header Options > Very Top Bar.



• from the admin area: Appearance > Menus > Manage Locations and check Very Top Bar Menu.

In this menu you can add:

• contact details like e-mail and phone number (preceded by icons)

  

  • 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.
• social media icons (display only icons)

  

• The external links to social media account will be displayed only as icons in the top bar menu
• normal links

📝 Note: The Very Top Bar menu is supporting only one level of the dropdown menu.

💭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:

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

📐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 > General Settings, 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).

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

🎨Changing the colors [PRO only]

In  Header Options > Very Top Bar > Appearance Settings, you also have options for changing the background color of the entire section as well as the text and links colors. 

• Background color - choose a color for the very top bar.
• Text Color - choose the color of the test.
• Link Color - choose a color for the link (eg. Add a menu).
• Link color on hover - choose the color of the link when you hover with the mouse.

🎯Examples  of Top Bar

1

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

2

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

3

Left: Top bar menu  ( social media links )

4

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

5

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

6

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

7

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

8

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

9

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

10

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