Site Header
The default site header appears on all pages throughout listers.co.uk.
<header class="c-site-header | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left">
<a class="c-site-logo c-logo" href="#/">
<svg class="c-logo__img" width="72" height="21" viewBox="0 0 185 56" aria-hidden="true">
<g class="c-logo__type" id="type_paths">
<path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
<path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
<path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
<path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
<path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
<path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
<path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
</g>
<g class="c-logo__swoosh" id="swoosh">
<path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
</g>
</svg>
</a>
</div>
<div class="o-navbar__right | u-removed-@bp3">
<button class="c-site-nav-btn">
<span>Menu</span>
<svg class="c-icon c-icon--md | u-ml-xs" viewbox="0 0 24 24" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="2">
<path d="M5 12h14M5 7h11M5 17h9"/>
</g>
</svg>
</button>
</div>
<!-- Navigation Area -->
<nav class="c-site-header__nav">
<ul class="o-list-inline | u-gap">
<li class="o-list__item">
<button class="c-site-nav__link">
Brands
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Search
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Offers
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Finance
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Servicing
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Explore
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>with Brand Link Logo
When the page is brand specific, place a brand logo next to the Listers logo in the site header.
<header class="c-site-header | o-navbar">
<div class="o-wrapper">
<div class="o-navbar__wrapper">
<div class="o-navbar__left | u-flex">
<a class="c-site-logo c-logo" href="#/">
<svg class="c-logo__img" width="72" height="21" viewBox="0 0 185 56" aria-hidden="true">
<g class="c-logo__type" id="type_paths">
<path d="M0 23.231h5.653v27.124h16.914v5.167h-22.567v-32.291"></path>
<path d="M28.22 23.231h5.654v32.291h-5.654z"></path>
<path d="M39.755 50.817l3.401-4.059c3.079 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.287-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.034 4.29c-2.895-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.803 1.66 10.341 4.105 10.341 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
<path d="M78.001 28.49h-10.204v-5.259h26.107v5.259h-10.204v27.032h-5.699v-27.032"></path>
<path d="M99.327 23.231h23.854v5.075h-18.201v8.396h16.133v5.075h-16.133v8.672h18.431v5.074h-24.084v-32.291"></path>
<path d="M129.569 23.231h14.341c4.045 0 7.216 1.2 9.284 3.229 1.7 1.753 2.666 4.152 2.666 6.966v.093c0 5.305-3.171 8.488-7.676 9.779l8.687 12.225h-6.665l-7.906-11.256h-7.078v11.256h-5.654v-32.291zm13.927 16.007c4.045 0 6.618-2.122 6.618-5.397v-.092c0-3.46-2.482-5.351-6.665-5.351h-8.227v10.841h8.273z"></path>
<path d="M160.088 50.817l3.401-4.059c3.08 2.676 6.159 4.198 10.158 4.198 3.493 0 5.699-1.615 5.699-4.059v-.093c0-2.306-1.286-3.552-7.262-4.936-6.848-1.661-10.709-3.691-10.709-9.641v-.092c0-5.536 4.596-9.365 10.985-9.365 4.688 0 8.411 1.43 11.674 4.059l-3.033 4.29c-2.896-2.168-5.791-3.322-8.733-3.322-3.309 0-5.24 1.707-5.24 3.829v.092c0 2.491 1.471 3.598 7.63 5.075 6.802 1.66 10.342 4.105 10.342 9.457v.092c0 6.043-4.734 9.641-11.491 9.641-4.918 0-9.56-1.707-13.421-5.167"></path>
</g>
<g class="c-logo__swoosh" id="swoosh">
<path d="M159 24.028c-9.933-13.657-40.214-8.746-49.653-7.636-25.232-22.557-56.296-4.543-82.347-1.835 30.766-7.17 51.259-23.836 81.689-7.837 2.728 1.436 6.811 3.652 6.811 3.652 9.439-1.113 40.474-3.428 43.5 13.657z"></path>
</g>
</svg>
</a>
<a class="c-site-brand t-volvo" href="#">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1265.88 98.26667" width="1265.88" height="98.26667">
<path fill="#161618" d="M21.4401328 16.32493572l43.56826557 79.15527802 50.44786541.03905333 42.82373226-79.20566469 21.4653328.01133334V1.9702694h-64.56613172v14.34333297h18.6474662l-31.18399922 57.6613319-31.6035992-57.64999856 22.66359942-.01133334L93.697331 1.97026941H.01875L0 16.3249357h21.4401328M576.53731892 16.28746905l-.00933333-14.3166663 86.38399784.01146666v14.30519964H641.3973173v64.61559838h19.9479995c18.48533287 0 30.6026659-12.20666636 30.6026659-28.77333261h14.25066631v43.26714559l-129.67066342.01041333V80.9229341h21.77733279l-.028-64.63546505h-21.73999946M366.5866575 83.40466737c-15.8399996-.2864-22.80399943-17.79426622-22.49999944-35.19066579.31466666-18.01666621 8.93599978-33.72653249 23.77466608-33.4681325 14.8386663.2604 22.67333276 16.2707996 22.3546661 34.27866582-.30133332 16.98946624-7.31466648 34.6770658-23.62933274 34.38013247m.48133332-83.40573125c-43.37733225 0-66.41599834 21.6401328-66.41599834 48.79373212 0 27.52866598 22.18399945 49.47399876 66.666665 49.47399876 44.4679989 0 66.41599834-21.94533278 66.41599834-49.47399876 0-27.15359932-23.28266608-48.79373212-66.666665-48.79373212M853.55597866 16.32493572l43.56666558 79.15527802 50.44799874.03905333 42.82399893-79.20566469 21.4653328.01133334V1.9702694h-64.5679984v14.34333297h18.64933287l-31.18266588 57.6613319-31.60399921-57.64999856 22.66399943-.01133334-.00533333-14.34333297h-93.67999766l-.01866667 14.3546663h21.4413328M1198.72797003 83.40466737c-15.8399996-.2864-22.8026661-17.79426622-22.49999944-35.19066579.316-18.01666621 8.93599978-33.72653249 23.77466608-33.4681325 14.83999963.2604 22.67333276 16.2707996 22.35333277 34.27866582-.3 16.98946624-7.31199982 34.6770658-23.6279994 34.38013247m.48133331-83.40573125c-43.37733225 0-66.414665 21.6401328-66.414665 48.79373212 0 27.52866598 22.1826661 49.47399876 66.66533166 49.47399876 44.47066556 0 66.41733168-21.94533278 66.41733168-49.47399876 0-27.15359932-23.28266609-48.79373212-66.66799834-48.79373212"/>
</svg>
</a>
</div>
<div class="o-navbar__right | u-removed-@bp3">
<button class="c-site-nav-btn">
<span>Menu</span>
<svg class="c-icon c-icon--md | u-ml-xs" viewbox="0 0 24 24" aria-hidden="true">
<g fill="none" fill-rule="evenodd" stroke-linecap="round" stroke-width="2">
<path d="M5 12h14M5 7h11M5 17h9"/>
</g>
</svg>
</button>
</div>
<!-- Navigation Area -->
<nav class="c-site-header__nav">
<ul class="o-list-inline | u-gap">
<li class="o-list__item">
<button class="c-site-nav__link">
Brands
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Search
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Offers
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Finance
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Servicing
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
<li class="o-list__item">
<button class="c-site-nav__link">
Explore
<svg class="c-icon" viewbox="0 0 16 16" aria-hidden="true" width="16" height="16">
<path d="m10.833 5.16 1.417 1.417-4.241 4.25-4.259-4.25 1.413-1.413 2.846 2.83z"/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</header>