/**
* Header Component * * Based on the existing GOV.UK header in GOV.UK Template, with an 'inline' * product name and hopefully improved mobile behaviour * * Notes: * * - Make sure you include header.js in your application. This will update * the aria-expanded and aria-hidden attributes on the toggle and the nav * respectively so that screen readers know what's happening. * - Link the current page to the same place as your skip link (e.g. #main) – * this means that it is included by screen readers but is referred to as a * 'same page' link, and clicking it does not reload the page. * * Example Usage: * * <header class="header"> * <div class="header__container"> * <div class="header__brand"> * <a href="/"> * <span class="header__title">My Product Page</span> * </a> * </div> * * <div data-module="navigation"> * <button type="button" class="header__navigation-toggle js-nav-toggle" aria-controls="navigation" aria-label="Show or hide top level navigation"> * Menu * </button> * * <nav id="navigation" class="header__navigation" aria-label="Top Level Navigation" aria-hidden="true"> * <ul> * <li class="active"><a href="#main">Active Page</a></li> * <li><a href="/other.html">Other Page</a></li> * </ul> * </nav> * </div> * </div> * </header> */
$active-nav-color: darken($dss-blue, 20%); $nav-border: lighten(grey, 20%);
.header {
@extend %contain-floats; @include screen { background: $dss-blue; color: $white; border-bottom: 10px solid $nav-border; }
}
.header__container {
@extend %site-width-container; @extend %contain-floats; zoom: 1; padding: 9px 0 6px; @include screen { border-bottom: 10px solid $nav-border; margin-bottom: -10px; }
}
.header.header–full-width {
margin-bottom: 0; @include screen { border-bottom: 10px solid $nav-border; } .header__container { border-bottom: none; width: auto; max-width: none; margin: 0 $gutter-half; @include media(tablet) { margin: 0 $gutter; } }
}
.header–without-border {
border-bottom: none; margin-bottom: 0; .header__container { border-bottom: none; margin-bottom: 0; }
}
.header__brand {
font-size: 30px; // Give brand focus outline on mobile &:after { content: "."; height: 0; clear: both; visibility: hidden; } a:link, a:visited { text-decoration: none; } a:hover { text-decoration: underline; } .govuk-logo { float: left; } @include screen { a:link, a:visited { color: $white; } a:focus { background-color: inherit; } @include media(tablet) { float: left; .govuk-logo { float: none; } a:hover { text-decoration: none; border-bottom: 1px solid $white; } } } @include print { a:link, a:visited { color: $black; } }
}
.header__title {
@include core-24; display: block; float: left; clear: left; @include media(tablet) { display: inherit; float: none; clear: none; } .phase-banner { margin-left: 5px; }
}
.header__navigation {
@include screen { // We want the same font size on mobile as tablet, so we can't use bold-16. @include _core-font-generator( $font-size: 16px, $font-size-640: 16px, $font-size-print: 12pt, $line-height: (20 / 16), $line-height-640: (20 / 16), $font-weight: 700 ); clear: both; padding-top: 10px; a:link, a:visited { color: $white; text-decoration: none; padding: 8px 0; display: inline-block; } .active a:link, .active a:visited { color: $active-nav-color; } a:focus, .active a:focus { color: $black; } a:hover, a:active { text-decoration: underline; } ul { border-top: 1px solid $grey-1; margin: 0; padding: 8px 0 0; } li { list-style: none; margin: 2px 0; } @include media(tablet) { display: block; clear: none; padding-top: 2px; border-top: none; float: right; a:link, a:visited { padding: 0; } ul { border-top: none; padding: 0; } li { float: left; margin: 12px 0 0 $gutter-half; } } } @include print { display: none; }
}
.header__navigation-toggle {
display: none;
}
.js {
.header__navigation { display: none; @include media(tablet) { display: block; } } .header__navigation-toggle { display: block; float: right; color: $white; background: transparent; border: 1px solid $grey-1; border-radius: 3px; padding: 2px 6px 1px; font-size: 80%; font-weight: bold; input { display: none; } @include media(tablet) { display: none; } &:after { display: inline-block; font-size: 8px; padding-left: 5px; vertical-align: middle; content: " \25BC"; } } &.nav-open .header__navigation-toggle:after { content: "\25B2"; } &.nav-open .header__navigation { display: block; }
}