Header
The Header tells citizens that they are on a website owned by Bristol City Council and provides a way to return to the main Bristol City Council homepage.
The HTML code snippet below requires the Bristol City Council logo file, which you can download from this link.
Make sure to save the logo file in the root directory of your project before using the HTML snippet, as the image path in the source attribute of the image element assumes its presence there.
Standard
- HTML5
<header role="banner" class="header">
<div class="container-fluid g-0 bg-black">
<div class="container">
<div class="no-nav is-d-flex is-align-start is-align-md-center has-px-4">
<a class="brand" href="https://bristol.gov.uk"
aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking.">
<div role="img" class="brand-img" aria-label="Bristol City Council">
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
<h2 class="brand-text">bristol.gov.uk</h2>
</a>
</div>
</div>
</header>
When to use
Use the Bristol City Council Header to demonstrate that a service, application or tool is owned by bristol.gov.uk. Use the Header to provide a link back to the Bristol City Council main website home page, and a skip link so that a user can bypass header navigation and get directly to content.
How it works
The Header associates the service or application with the Bristol City Council brand and bristol.gov.uk main site. The Header logo links back to the bristol.gov.uk home page. A Header title link (for example; bristol.gov.uk) also links back to the Bristol City Council home page.
When to use links
Use account sign in and create account links when a user needs to be able to sign in from multiple pages within an application or journey only.
For example: The application has pages that you can complete in either a signed in or signed out state
Account sign in links: states
Refer to Styles > Colours to understand the different link states available for header links.
- HTML5
<header role="banner" class="header">
<div class="container-fluid g-0 bg-black">
<div class="container">
<div class="no-nav is-d-flex is-align-start is-align-md-center is-justify-between has-px-4">
<a class="brand" href="https://bristol.gov.uk"
aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking.">
<div role="img" class="brand-img" aria-label="Bristol City Council">
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
<h2 class="brand-text">bristol.gov.uk</h2>
</a>
<ul class="list-unstyled sign-in-account has-mt-3 has-m-lg-0">
<li class="is-d-lg-flex "><a class="nav-link" href="#" rel="nofollow">Sign in</a></li>
<li class="is-d-lg-flex "><a class="nav-link" href="#" rel="nofollow">Create an account</a></li>
</ul>
</div>
</div>
</div>
</header>
Header (For use on main website only)
Use the navigation menu bar under the header to include basic navigation links to other important areas of the website. The navigation menu bar Should be used for the main website and sub-sites only unless there is a strong argument to implement elsewhere. Only use the search bar and account link for the main website.
- Sign inYour account
bristol.gov.uk
- HTML5
<header role="banner" class="header has-search-form">
<div class="container-fluid g-0 bg-black">
<div class="container">
<div class="has-nav is-d-flex is-justify-between is-align-start is-align-md-center has-px-4">
<ul class="list-unstyled nav-account is-d-flex is-d-md-none">
<li class="is-d-lg-flex is-align-center">
<a class="nav-link has-pt-3 has-px-4 has-p-lg-0" href="#" rel="nofollow">
<i class="bcc-font_user is-d-block is-d-sm-none"></i>
<span class="is-d-none is-d-sm-block">Sign in</span>
</a>
<span class="screen-reader-only">Your account</span>
</li>
</ul>
<a class="brand" href="https://bristol.gov.uk"
aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking.">
<div role="img" class="brand-img" aria-label="Bristol City Council">
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
<h2 class="brand-text">bristol.gov.uk</h2>
</a>
<form action="" class="form search-ba-block">
<div class="field">
<div class="bcc-form-search">
<label class="screen-reader-only" for="site-search">Search</label><input type="search"
aria-describedby="description-error" id="site-search" class="field__input"
aria-label="Search" placeholder="Search" name="site-search" value="">
<button class="button secondary bg-brand is-search icon-left" type="submit">Search
<i class="bcc-font_search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<nav id="main-navigation" class="navigation">
<div class="container has-px-0 has-px-md-4">
<div class="nav-wrap" aria-label="main navigation">
<ul class="nav-items list-unstyled">
<li class="is-d-lg-flex">
<a class="nav-link " href="#">For residents</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link " href="#">For business</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link " href="#">Council and Mayor</a>
</li>
</ul>
<ul class="list-unstyled nav-account is-d-none is-d-md-flex">
<li class="is-d-lg-flex is-align-center">
<a class="nav-link has-pt-3 has-px-4 has-p-lg-0" href="#" rel="nofollow">Your account</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
State: For use without search bar and account link
- HTML5
- JavaScript
<header role="banner" class="header">
<div class="container-fluid nav-container g-0 bg-black">
<div class="container">
<div class="has-nav is-d-flex is-justify-between is-align-start is-align-md-center has-px-4">
<button class="burger nav-cta" aria-expanded="false" aria-controls="main-navigation"
aria-label="open navigation menu" role="button">
<span class="burger-icon" aria-hidden="true">
<span></span>
</span>
<span class="screen-reader-only">Menu</span>
</button>
<a class="brand" href="https://bristol.gov.uk" aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking.">
<div role="img" class="brand-img" aria-label="Bristol City Council">
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
<h2 class="brand-text">bristol.gov.uk</h2>
</a>
</div>
</div>
<nav id="main-navigation" class="sliding-nav">
<div class="container has-px-0 has-px-md-4">
<div class="nav-wrap" aria-label="main navigation">
<ul class="nav-items list-unstyled">
<li class="is-d-lg-flex">
<a class="nav-link " href="#">For residents</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link" href="#">For business</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link" href="#">Council and Mayor</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
const navBlocks = document.querySelectorAll('.nav-container');
const BREAKPOINT = 900;
const mediaQuery = window.matchMedia(`(min-width: ${BREAKPOINT}px)`);
const navBp = `(min-width: ${BREAKPOINT}px)`;
let isMenuOpen = false;
let result = true;
for (let i = 0; i < navBlocks.length; i++) {
if (navBlocks[i] <= 0) {
result = false;
break;
}
const menu = navBlocks[i].querySelector('.sliding-nav .nav-wrap');
const nav = navBlocks[i].querySelector('.sliding-nav');
const btn = navBlocks[i].querySelector('.nav-cta');
btn.onclick = function (e) {
e.preventDefault();
isMenuOpen = !isMenuOpen;
btn.setAttribute('aria-expanded', String(isMenuOpen));
menu.hidden = !isMenuOpen;
if (isMenuOpen) {
nav.classList.add('is-open');
document.body.classList.add('is-no-scroll', 'is-fixed');
} else {
nav.classList.remove('is-open');
document.body.classList.remove('is-no-scroll', 'is-fixed');
}
};
function handleTabletChange(e) {
// Check if the media query is true
if (e.matches) {
//console.log("desktop");
btn.setAttribute('aria-expanded', false);
menu.removeAttribute('hidden');
nav.classList.remove('is-open');
document.body.classList.remove('is-no-scroll', 'is-fixed');
} else {
//console.log("mobile");
btn.setAttribute('aria-expanded', false);
}
}
// Register event listener
mediaQuery.addListener(handleTabletChange);
// Initial check
handleTabletChange(mediaQuery);
// TRAP TAB INSIDE NAV WHEN OPEN
nav.addEventListener('keydown', (e) => {
// abort if menu isn't open or modifier keys are pressed
if (!isMenuOpen || e.ctrlKey || e.metaKey || e.altKey) {
return;
}
// listen for tab press and move focus
// if we're on either end of the navigation
const menuLinks = menu.querySelectorAll('.nav-link');
if (e.keyCode === 9) {
if (e.shiftKey) {
if (document.activeElement === menuLinks[0]) {
menuToggle.focus();
e.preventDefault();
}
} else if (document.activeElement === menuToggle) {
menuLinks[0].focus();
e.preventDefault();
}
}
});
}
State: Header with dropdown
When to use
When you have multiple high-level pages that need to be accessed from the header navigation with lower level page also easily accessible, apply the header with drop down state. The user should be able to hover over the top level navigation title and see what other pages are available to navigate to.
Use this feature to signpost the user to lower level pages when there are multiple pages related to the high level pages. Try to avoid too many top level navigation links, choosing instead to focus on important pages or high visit pages.
- HTML5
- JavaScript
<li class="has-nav-panel is-d-lg-flex">
<button
role="button"
aria-expanded="false"
class="nav-panel-cta has-pb-3 has-pt-3 has-px-4 has-p-lg-0">
<span class="has-mr-2">Dropdown</span>
</button>
<div class="nav-panel">
<div class="row no-gutters">
<div class="col-md-12">
<p class="is-h5 has-mb-3 has-text-left has-pl-lg-0">Dropdown</p>
<ul class="list-unstyled has-pl-3 has-pl-lg-0">
<li><a href="_#">Lorem ipsum</a></li>
<li><a href="_#">Dropdown link 2</a></li>
<li><a href="_#">Dropdown link 3</a></li>
</ul>
</div>
</div>
</div>
</li>
function dropDown() {
let dropDownBlock = document.querySelectorAll(".nav-items");
const navLinks = dropDownBlock[0].querySelectorAll(".has-nav-panel");
if (navLinks.length <= 0) {
result = false;
return;
}
const dropdownCta = dropDownBlock[0].querySelector(".nav-panel-cta");
const dropdownPanel = dropDownBlock[0].querySelector(".nav-panel");
Array.prototype.forEach.call(navLinks, function (el, i) {
let currentNavLink = navLinks[i];
currentNavLink.addEventListener("click", function () {
console.log("click");
megaNavClickAndTouchHandler(navLinks, currentNavLink);
});
});
function megaNavClickAndTouchHandler(elements, currentElement) {
let isSubNavLink = currentElement.classList.contains("has-nav-panel");
let isSubNavLinkActive = currentElement.classList.contains("is-active");
if (!isSubNavLink) {
window.location = currentElement.firstElementChild.getAttribute("href");
} else if (isSubNavLink && !isSubNavLinkActive) {
megaNavClosePanels(elements);
currentElement.classList.add("is-active");
dropdownCta.setAttribute("aria-expanded", true);
} else {
megaNavClosePanels(elements);
}
}
function megaNavClosePanels(elements) {
for (let j = 0; j < elements.length; j++) {
if (elements[j].classList.contains("has-nav-panel")) {
elements[j].classList.remove("is-active");
dropdownCta.setAttribute("aria-expanded", false);
}
}
}
}
dropDown();
State: Header with dropdown and search
When to use
Use when the page requires both a dropdown menu and search input.
- HTML5
<header role="banner" class="header has-search-form">
<div class="container-fluid g-0 bg-black">
<div class="container">
<div class="has-nav is-d-flex is-justify-between is-align-start is-align-md-center has-px-4">
<ul class="list-unstyled nav-account is-d-flex is-d-md-none">
<li class="is-d-lg-flex is-align-center">
<a class="nav-link has-pt-3 has-px-4 has-p-lg-0" href="#" rel="nofollow">
<i class="bcc-font_user is-d-block is-d-sm-none"></i>
<span class="is-d-none is-d-sm-block">Sign in</span>
</a>
<span class="screen-reader-only">Your account</span>
</li>
</ul>
<a class="brand" href="https://bristol.gov.uk"
aria-label="Bristol City Council home page - bristol.gov.uk Information for residents about Bristol City Council services including council tax, bins and recycling, schools, leisure, streets and parking.">
<div role="img" class="brand-img" aria-label="Bristol City Council">
<img
src="/BCC_logo_color_negative.svg"
width="80px"
alt="Bristol City Council - colour logo"
title="Bristol City Council - colour logo"
/>
</div>
<h2 class="brand-text">bristol.gov.uk</h2>
</a>
<form action="" class="form search-ba-block">
<div class="field">
<div class="bcc-form-search">
<label class="screen-reader-only" for="site-search">Search</label><input type="search"
aria-describedby="description-error" id="site-search" class="field__input"
aria-label="Search" placeholder="Search" name="site-search" value="">
<button class="button secondary bg-brand is-search icon-left" type="submit">Search
<i class="bcc-font_search"></i>
</button>
</div>
</div>
</form>
</div>
</div>
<nav id="main-navigation" class="navigation">
<div class="container has-px-0 has-px-md-4">
<div class="nav-wrap" aria-label="main navigation">
<ul class="nav-items list-unstyled">
<li class="is-d-lg-flex">
<a class="nav-link " href="#">For residents</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link " href="#">For business</a>
</li>
<li class="is-d-lg-flex">
<a class="nav-link " href="#">Council and Mayor</a>
</li>
<li class="has-nav-panel is-d-lg-flex">
<button
role="button"
aria-expanded="false"
class="nav-panel-cta has-pb-3 has-pt-3 has-px-4 has-p-lg-0">
<span class="has-mr-2">Dropdown</span>
</button>
<div class="nav-panel">
<div class="row no-gutters">
<div class="col-md-12">
<p class="is-h5 has-mb-3 has-text-left has-pl-lg-0">Dropdown</p>
<ul class="list-unstyled has-pl-3 has-pl-lg-0">
<li><a href="_#">Lorem ipsum</a></li>
<li><a href="_#">Dropdown link 2</a></li>
<li><a href="_#">Dropdown link 3</a></li>
</ul>
</div>
</div>
</div>
</li>
</ul>
<ul class="list-unstyled nav-account is-d-none is-d-md-flex">
<li class="is-d-lg-flex is-align-center">
<a class="nav-link has-pt-3 has-px-4 has-p-lg-0" href="#" rel="nofollow">Your account</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
</header>
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.
- JavaScript
const header = document.querySelector(".header");
const nav = header.querySelector(".sliding-nav");
if(nav) {
nav.style.top = `${header.offsetHeight}px`;
}