Skip to main content

Header and site navigation

The header shows that a service is owned by Bristol City Council. The logo and title text, 'bristol.gov.uk', link to bristol.gov.uk.

Before you start​

Download the Bristol City Council logo and save it to the root directory of your project.

The header can include:

  • account links

  • a search field

  • site navigation

You must include a skip link so that a user can bypass header content and get directly to the navigation or page content. This is included in the Boilerplate set up that we provide but if you need to implement it separately you can use this HTML snippet.

Basic​

Use account links when a user will need to sign in, create an account or go to their account as part of your service.

On smaller screens, below 900px wide, the account links wrap below the logo and title text, to the right-hand side.

If your service does not have a clear start to finish journey, you can use a search field to help users find content.

On smaller screens, below 900px wide, the search field wraps below the logo and title text.

With site navigation​

If your service does not have a clear start to finish journey, you can use site navigation to help users find content. Site navigation shows the top-level pages.

On smaller screens, below 900px wide, the site navigation menu collapses and is hidden from view until the user selects the ‘Menu’ button. Menu items display in a vertical list.

Show child pages​

Use dropdowns in your site navigation to show child pages of the top-level pages.

For main website​

This variant uses a header with search, site navigation and a ‘Your accounts’ link. It must only be used on bristol.gov.uk.

On smaller screens, below 900px wide, the ‘Your accounts’ link moves to the top right of the header. On screens below 320px wide, the ‘Your accounts’ text changes into an icon of a person. The site navigation does not collapse.

Responsive sliding navigation menu height​

Use this .js snippet to adjust the height of the sliding navigation menu dependent on the height of the header.