Pro How to configure the Top bar

The top bar, positioned above your website’s header, provides an area for presenting additional information to your users.

To enable the Top Bar, please go to Customize > Header > Top Bar and click on Enable Top Bar.

General options

There are a few general options that you can use to tweak the top bar. These are options are:

  • container type: full width or contained;
  • delimiter style: the symbol between the top bar elements;
  • visibility: control the devices on which to show/hide the top bar.

Elements

The full list of elements is (please note that for some of them you need to enable the Extended Header module):

  • Contact Info: email address and phone number;
  • Social: links with icons to your social profiles;
  • Text: simple text input;
  • Secondary menu: select and display an additional menu;
  • Shortcode: simple shortcode input;
  • HTML: textarea with basic HTML support;
  • Login/Register modal: offers a quick way to register or login;
  • WPML Language Switcher;
  • Polylang Language Switcher.

Note that you can click on the icons to open the options for each of the elements:

Styling the top bar

Click on the Style tab to access all of the styling options. You can control the background and text colors, the padding for the top bar and also the proprieties for the border between the top bar and the actual header.