Optionally add classes of has-solid-bg to .header-site and .breadcrumbs to give them solid back backgrounds, rather than semitransparent.
<header class="header-site has-solid-bg" id="header-site">
<div class="wrap">
<div class="header-site__flexContainer">
<a class="site-logo" title="Home" href="/">
<img src="../../img/logo.png" alt="Staffordshire University Logo" class="no-lazy-load">
</a>
<button class="toggle-megaNav" id="toggle-megaNav" aria-controls="megaNav"><span class="toggle-megaNav__label">Menu</span></button>
<button class="toggle-search-site" id="toggle-search-site" aria-controls="search-site"><span class="toggle-search-site__label">Search</span></button>
<nav class="megaNav" id="megaNav" role="navigation">
<div class="megaNav__controls">
<button class="megaNav__close" id="megaNav__close"><span class="visually-hidden">Close</span></button>
</div>
<div class="megaNav__topLevel">
<ul class="megaNav__topLevel-list">
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">Courses</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Courses</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Subject Areas</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Subject Areas</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Animation</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Art and Design</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Education</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">Engineering</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Undergraduate</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Postgraduate</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Postgraduate</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Accounting and Finance</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Allied Health and Paramedic Science</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Animation</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Art and Design</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Augmented and Virtual Realities</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Biological and Biomedical Sciences</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Business and Marketing</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Computer Science, AI and Robotics</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Education</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Engineering</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG ...</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Accounting and Finance</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Allied Health and Paramedic Science</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Animation</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Art and Design</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Augmented and Virtual Realities</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Biological and Biomedical Sciences</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Business and Marketing</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Computer Science, AI and Robotics</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Education</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG Engineering</a></li>
<li class="megaNav__thirdLevel-item"><a class="megaNav__thirdLevel-link" href="">PG ...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Professional</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Distance Leaning</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Partnerships</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Apprenticeships</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>Find a Course</p>
<form>
<input type="text" placeholder="Search on keyword / subject" />
<input type="submit" class="button" />
</form>
</div>
</div>
</li>
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">Student life</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Student Life</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Accommodation</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Accommodation</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Stoke-on-Trent</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Stafford</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Shrewsbury</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Private accommodation</a></li>
</ul>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">How to apply</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Guaranteed accommodation</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">International students</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Special requirements</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Frequently asked questions</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Campus and facilities</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Life in Staffordshire</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Getting involved</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Student support</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Life on campus</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Sport</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Chat to a Student</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
<li class="megaNav__topLevel-item">
<a class="megaNav__topLevel-link" href="">International</a>
</li>
<li class="megaNav__topLevel-item has-children has-simple-children">
<a class="megaNav__topLevel-link " href="">Research</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Research</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">Business</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Business</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Test Item</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Test Item</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
</div>
</li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
<li class="megaNav__topLevel-item has-children">
<a class="megaNav__topLevel-link " href="">About us</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">About us</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Test Item</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Test Item</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item has-children">
<a class="megaNav__secondLevel-link " href="">Test Item</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Test Item</button>
</div>
<ul class="megaNav__levelList megaNav__thirdLevel-list">
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Test Item</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Test Item</a></li>
</ul>
<div class="megaNav__levelFooter">
<p>What’s it like living here?</p>
<p><a href="" class="button">Book an open day</a></p>
</div>
</div>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<div class="masthead masthead--shallow masthead--no-bg">
<div class="masthead__inner">
<div class="wrap">
<nav class="breadcrumbs has-solid-bg">
<ul>
<li>
<a href="#">Home</a>
</li>
<li>
<a href="#">Solid BG Option</a>
</li>
<li>
<a href="#">For Use When Masthead</a>
</li>
<li>
<a href="#">Has No Image</a>
</li>
</ul>
</nav>
<div class="title title--has-tail js-waypoint">
<h1 class="title__highlight h1">
Masthead With No Image (Shallow)
</h1>
</div>
</div>
</div>
</div>
{% include '@meganav' with {
solidBg: true
} %}
<div class="masthead masthead--shallow masthead--no-bg">
<div class="masthead__inner">
<div class="wrap">
{% include '@breadcrumbs--has-solid-background' %}
{% include '@title' with {
text: 'Masthead With No Image (Shallow)',
modifiers: ['has-tail'],
textElement: 'h1',
textElementStyle: 'h1',
animate: true
} %}
</div>
</div>
</div>
.masthead {
$overlay-breakpoint: $third-breakpoint + 10rem;
display: flex;
flex-wrap: wrap;
background-color: $offwhite;
box-sizing: border-box;
position: relative;
&__bg {
// should use an abs:pos div with responsive image rather than background image
// CG: This is an additional comment
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 0;
overflow: hidden;
img {
@supports (object-fit: cover) {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
object-fit: cover;
object-position: 60% 35%; // we're going to assume the image's focal point is roughly slightly-above-center right, but specify this as an inline style for each image
}
}
&--blurred {
overflow: hidden;
img {
transform: scale(1.1);
filter: blur(1em);
}
@media (min-width: $overlay-breakpoint) {
display: none; // this full-viewport filter is actually quite process intensive, so get rid as soon as it's not needed
}
}
}
&__inner {
display: flex;
flex-wrap: wrap;
min-height: 65vmin;
padding: 12rem 0 $spacing-xl;
align-self: flex-end;
align-content: flex-end;
width: 100%;
position: relative;
box-sizing: border-box;
@media (min-width: $overlay-breakpoint) {
position: static;
}
}
&__overlay {
align-self: flex-end;
align-content: flex-end;
width: 100%;
padding: $spacing-lg 0 0;
box-sizing: border-box;
background: black;
color: white;
z-index: 1;
@media (min-width: $overlay-breakpoint) {
background: none;
padding: 0;
margin-bottom: $spacing-lg;
&Inner {
margin: 0 -#{$grid-gutter};
padding: $spacing-lg $grid-gutter 0;
background: rgba(black, 0.75);
@supports (backdrop-filter: blur(1em)) {
background: rgba(black, 0.6);
}
backdrop-filter: blur(1em);
}
}
}
&--has-blurredBg {
.masthead__overlay {
background: rgba(black, 0.75);
@supports (backdrop-filter: blur(1em)) {
background: rgba(black, 0.6);
}
@media (min-width: $overlay-breakpoint) {
background: none;
}
}
}
.wrap {
position: relative;
align-self: flex-end;
z-index: 0;
}
&--shallow {
.masthead__inner {
min-height: 40vh;
}
}
}