Site Top Bar component

create a Site Top Bar for your header

  • add contact information
  • add links
  • add different language options

The Site Top Bar component is an optional component of the Header Navigation Configuration page template. It is used to display a company motto or slogan, link to different pages, contact information and to link to different language copies.

on this page:
Component settings , Opens In New Window
Step by step , Opens In New Window

Introduction

The Site Top Bar component is part of the Header Navigation Configuration page template.  It can display up to 3 different links and a dropdown for contact information, using the Contact Configuration page, as well as links to different language copies of the website and a claim. The claim is simply some text that is usually used for the company motto or slogan.

Glossary:

Example:

Component Settings

tab: Claim

In the Claim tab, you can add text (e.g. a slogan or motto) to the Site Top Bar, above the Header logo. 

Claim:

tab: Links

In the Links tab, you can add text up to 3 links to your Site Top Bar.

Unfortunately Scroll to anchor does not work for the header, but it can be replaced with a deeplink (see below).

Editorial hint:

Deep link to a section or anchor on another page

It is also possible to link to a set anchor or section of a page directly. To do so:

  1. create an link with type internal
  2. choose the desired Link path
  3. add a hash, followed by the ID of the section or anchor manually to the link path manually, e.g. .../Privatkunden#konto

Links:

For more information check out our page on the Recurring content element Link.

tab: Contact us desktop

In the Contact us desktop tab, you can set up a dropdown for contact information.

You have to add the path to an already created Conatct Configuration page.

Contact Us Desktop:

tab: Contact us mobile

In the Contact us mobile tab, you can set up contact information for mobile devices.

You have to add the path to an already created Conatct Configuration page.

Contact Us Mobile:

tab: Languages

In the Languages tab, you can set up links to different language copies of your website.

This option works using the LAU (Language Aware URL) feature and the Alias feature. When you choose the different language node (e.g. /en) in the Path Select Dialog, these two features automatically link to the translated page you created.

Languages:

tab: General

In the General tab, the color of the Site Top Bar can be changed.

The color Petrol is only an option for Spark7, please stick to the Standard blue.

 

Colors:

tab: Branchfinder Mobile

In the Branchfinder Mobile tab, a branchfinder link can be configured for mobile devices.

If left empty no Site Top Bar will be added to the Mobile Header.

Branchfinder Mobile:

Step by step

1

2

3

4

5

6

Related topics

Used recurring elements