---
title: "Global Header"
canonical: "https://docs.pbs.org/space/B3/4751523/Global%20Header"
format: markdown
---
> Macro (toc)
> ❌ **This component is for use on Producer sites only. Producers should request an API key for this component when ****[requesting integrations](https://docs.pbs.org/space/B3/4751441/Setting+Up+Your+Site#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, a sign-in feature*, and links to PBS content.
**** The sign in feature can be removed by ******[filing a support ticket](https://digitalsupport.pbs.org/support/tickets/new)****** and requesting the removal.***
## Features
The following features are available on the Global Header:
- Navigation to content on [PBS.org](http://pbs.org)
- PBS logo
- [PBS.org](http://PBS.org) search functionality
- Localization
- User sign in (If you do not want Sign in to display on your global header, [file a support ticket](https://digitalsupport.pbs.org/support/tickets/new) and request to have it removed)
## Example
The global header displays at the top of the page and includes all of the features described in the Features section above. The sign in button is located in the top right side of the header. When clicked, access your profile by clicking **Profile **or sign out of the site by clicking** Sign out**. Site search is accessible by clicking the magnifying glass icon, also located in the upper right side of the screen.
### Dark version
| **Not logged in** | **Logged in** | **Menu (while logged in)** |
| --- | --- | --- |
|  |  |  |
### Light version
| **Not logged in** | **Logged in** | **Menu (while logged in)** |
| --- | --- | --- |
|  |  |  |
## How to implement the Global Header
> ⚠️ **Please note that a secure URL (https:) must be associated in order for this component to work correctly. If an unsecured URL (http:) is associated with your Global Header, visitors to your website will get an error message when they click into the search field. **
- 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](http://digitalsupport.pbs.org/support/tickets/new) and state that you'd like an API key for the Bento Global Header component.
Figure 2
- The Global Header should display at the very top of your page, so if it not already there, **hover your mouse over the component** and click the upward-facing arrow to move it closer to the top of the page or the downward-facing arrow to move it further down the page(Figure 3).
Figure 3
- If set up properly, your Global Header surfaces the header at the top of your website (Figure 4). This example displays the Sign in option that is automatically added but can be omitted by [submitting a support ticket](https://digitalsupport.pbs.org/support/tickets/new).
Figure 4
## Non-Bento sites
We do not recommend overriding Global Chrome styling, however, if you are implementing Global Chrome on a non-Bento site, there are specific guidelines you must follow to ensure your site displays correctly. This section illustrates those guidelines.
### Guidelines
Do not apply styling directly to an element; use classes or IDs when an element needs to be styled. Create a styling class and apply that class to all targeted elements (such as buttons) in all pages where the elements are used.
### What not to do
The following example illustrates how styling should *not *be applied.
The button element has styling directly applied on the element type. This overwrites the header styling, which is defined by class/id hierarchy. The result is having the highlight displayed over the buttons in the header (Figure 1).
Figure 1
