This component is for use on Producer sites only. Producers should request an API key for this component when requesting integrations during site setup.

Overview

The Global Header provides a common, standalone header containing links back to PBS content. It is responsive so it displays properly on all devices. This component is designed with code that can be easily shipped off to your developer for sites being created by a third party. Using the Global Header assures that your website consistently displays PBS branding and links to PBS content.

Features include:

  • Navigation to content on pbs.org
  • PBS logo
  • PBS.org search functionality
  • Localization (the station to which the user is localized appears to the right of the PBS logo)

Example

When viewed on a mobile device, top navigation items are condensed and available by clicking the dropdown menu in the upper right side of the screen. Site search is accessible by clicking the magnifying glass icon, also located in the upper right side of the screen.

Desktop

Mobile

Expanded:

How to implement the Global Header

 View the tutorial

  • In the Header section of your Bento site, click the plus sign (Figure 1.1).
  • Click global header (Figure 1.2).

Figure 1

  • Your Global Header component displays on the page (Figure 2.1).
  • On the left side of the screen, the API key associated with your Global Header displays (Figure 2.2). If this is not present, your Global Header will not work. To obtain this key, please submit a support ticket and state that you'd like an API key for the Bento 3 Global Header component. 

Figure 2

  • The Global Header should appear at the very top of your page so if it not already there, hover your mouse over the component, click the orange border, and drag the component to the top of the section (Figure 3). When it is in place, release your mouse.

Figure 3


  • If set up properly, your Global Header surfaces the header at the top of your website (Figure 4).

Figure 4