The .megaNav__topLevel-item can have a class of is-active to apply its ‘active’ state (top red border)
For items with no third level, a class of has-simple-children should be added to the megaNav__topLevel-item (in addition to has-children)
<header class="header-site" id="header-site">
<div class="wrap">
<div class="header-site__flexContainer">
<a class="site-logo" title="Home" href="/">
<img src="../../img/theme-ldn/logo-ldn.svg" alt="Digital Institute London Logo" class="no-lazy-load">
</a>
<button class="toggle-megaNav" id="toggle-megaNav" aria-controls="megaNav"><span class="toggle-megaNav__label">Menu</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 has-simple-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"><a class="megaNav__secondLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Animation</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Art and Design</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Education</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Engineering</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">...</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="">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 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>
<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">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Private accommodation</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Meet the Experts</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">How To Find Us</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="">Facilities</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="">Events</a>
</li>
<li class="megaNav__topLevel-item ">
<a class="megaNav__topLevel-link " href="">Connect With Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
<header class="header-site{{ solidBg ? ' has-solid-bg' }}" id="header-site">
<div class="wrap">
<div class="header-site__flexContainer">
<a class="site-logo" title="Home" href="/">
<img src="{{ '/img/theme-ldn/logo-ldn.svg' | path }}" alt="Digital Institute London Logo" class="no-lazy-load">
</a>
<button class="toggle-megaNav" id="toggle-megaNav" aria-controls="megaNav"><span class="toggle-megaNav__label">Menu</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 has-simple-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"><a class="megaNav__secondLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Animation</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Art and Design</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Education</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Engineering</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">...</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="">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 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>
<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">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Somewhere</a></li>
<li class="megaNav__thirdLevel-item"><a href="" class="megaNav__thirdLevel-link">Private accommodation</a></li>
</ul>
</div>
</li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">Meet the Experts</a></li>
<li class="megaNav__secondLevel-item"><a class="megaNav__secondLevel-link" href="">How To Find Us</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="">Facilities</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="">Events</a>
</li>
<li class="megaNav__topLevel-item ">
<a class="megaNav__topLevel-link " href="">Connect With Us</a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</header>
.megaNav {
$border-color: #bebfc1;
$row-padding-y: 0.75em;
//$megaNav-full-breakpoint: _layout.scss;
position: absolute;
left: 0;
right: 0;
top: 0;
background: white;
font-size: 1.2em;
z-index: 9;
overflow: hidden;
overflow-y: auto;
box-sizing: border-box;
overflow-scrolling: touch;
transform: translateX(-150%);
&.is-open {
transition: transform 200ms ease-out;
transform: translateX(0);
}
@media (min-width: $megaNav-full-breakpoint) {
top: auto;
width: 100%;
transform: none;
transition: none;
font-size: 1em;
position: static;
overflow: visible;
background: none;
margin: 0 0 0 5%;
}
@media (min-width: $megaNav-full-breakpoint + 10rem) {
font-size: 1.1em;
}
ul ul {
@at-root .no-js & {
padding-left: $spacing-sm;
}
}
li {
margin: 0;
> a {
position: relative;
display: block;
padding: $row-padding-y 2em $row-padding-y 0;
color: $neutral--primary;
border-bottom: 1px solid $border-color;
@media (min-width: $megaNav-full-breakpoint) {
padding: $spacing-sm $spacing-lg $spacing-sm;
}
&:hover {
text-decoration: underline;
}
}
&:last-child {
> a {
border-bottom: 0;
}
}
}
.has-children {
> a {
&:after {
content: '';
position: absolute;
display: block;
right: 0;
top: $row-padding-y;
width: 2em;
height: 2em;
background: url('#{$image-theme-directory-icon}/icon-gt-primary.svg') no-repeat center center;
background-size: 0.5em;
}
}
}
.has-simple-children {
@media (min-width: $megaNav-full-breakpoint) {
position: relative;
.megaNav__levelFooter {
display: none;
}
.megaNav__level {
left: auto;
}
.megaNav__secondLevel {
background: white;
}
.megaNav__secondLevel-list {
padding: $spacing-md;
min-height: auto;
width: auto;
min-width: 17.5em;
}
}
}
.is-expanded {
> .megaNav__level {
//left: 0;
//opacity: 1;
visibility: visible;
height: auto;
overflow: visible;
min-height: 100%;
transform: translateX(0);
transition: transform 100ms, visibility 100ms;
@media (min-width: $megaNav-full-breakpoint) {
transition: none;
transform: translateY(0);
opacity: 1;
min-height: none;
}
}
> .megaNav__secondLevel {
@media (min-width: $megaNav-full-breakpoint) {
display: flex;
}
}
}
&__controls {
position: absolute;
left: 0;
width: $spacing-4xl;
overflow: hidden;
@media (min-width: $megaNav-full-breakpoint) {
display: none;
}
}
&__close {
content: '';
border: 0;
box-sizing: border-box;
display: block;
width: $spacing-4xl;
height: $spacing-4xl;
margin-top: 0.1em; // yeah this is a bit of a magic number to get it to align with the closeLevel arrows
background: url('#{$image-theme-directory-icon}/icon-x-primary.svg') no-repeat center center;
background-size: 1rem;
cursor: pointer;
}
&__level {
position: absolute;
//opacity: 0;
visibility: hidden;
background: $greyblue--light;
top: 0;
right: 0;
left: 0;
height: 0;
min-height: 0;
padding-bottom: 12rem; // this needs to be stupidly large, because of the way iOS handles 100vh, so items aren't covered by the bottom OS UI when expanded.
overflow: hidden;
transform: translateX(100%);
padding-left: $spacing-lg;
box-sizing: border-box;
z-index: 1;
transition: transform 100ms, visibility 100ms;
@media (min-width: $megaNav-full-breakpoint) {
min-height: auto;
transform: translateY(-200%);
padding: 0;
opacity: 0;
}
}
&__levelHeader {
margin-left: -$spacing-lg;
padding-left: $spacing-lg;
background: white;
color: $neutral--primary;
font-weight: 500;
border-bottom: 1px solid $border-color;
@media (min-width: $megaNav-full-breakpoint) {
display: none;
}
}
&__closeLevel {
position: relative;
display: block;
width: 100%;
background: none;
border: 0;
@include line-height('spaced');
padding: $row-padding-y 2em;
box-sizing: border-box;
cursor: pointer;
text-align: center;
&:active {
color: $primary;
}
&:before {
content: '';
position: absolute;
display: block;
left: 0;
top: $row-padding-y;
width: 1em;
height: 2em;
background: url('#{$image-theme-directory-icon}/icon-gt-primary.svg') no-repeat center center;
background-size: 0.5em;
transform: rotate(180deg);
}
}
&__levelList {
}
&__levelMobileFooter {
.megaNav__closeLevel {
text-align: left;
}
@media (min-width: $megaNav-full-breakpoint) {
display: none;
}
}
&__levelFooter {
position: relative;
margin-left: -$spacing-lg;
padding: $spacing-sm;
padding-left: $spacing-lg;
background: $neutral--light;
color: white;
z-index: 0;
form {
display: flex;
flex-wrap: wrap;
margin-left: -#{$grid-gutter-small};
margin-right: -#{$grid-gutter-small};
input[type=text], .button {
width: auto;
margin-left: #{$grid-gutter-small};
margin-right: #{$grid-gutter-small};
flex: 1 1 15em;
margin-bottom: $spacing-2xs;
box-sizing: border-box;
}
}
@media (min-width: $megaNav-full-breakpoint) {
width: 100%;
text-align: center;
margin: 0;
padding: $spacing-sm $spacing-sm 0;
z-index: 2;
p, form {
margin: $spacing-sm $spacing-md;
display: inline-block;
}
}
}
&__topLevel {
position: relative;
margin: 0;
height: 100vh;
background: $greyblue--light;
padding: 0 0 $spacing-4xl $spacing-lg;
margin-left: $spacing-4xl;
border-left: 1px solid $border-color;
box-sizing: border-box;
overflow: hidden;
overflow-y: auto;
overflow-scrolling: touch;
box-sizing: border-box;
@media (min-width: $megaNav-full-breakpoint) {
position: static;
height: auto;
background: none;
padding: 0;
margin-left: 0;
border-left: 0;
overflow: visible;
}
&-item {
> a {
font-weight: 500;
}
@media (min-width: $megaNav-full-breakpoint) {
&.has-children {
> a {
&:after {
display: none;
}
}
}
&.is-expanded {
> a {
background: white;
color: black;
}
}
&.is-active {
> a {
box-shadow: inset 0 $spacing-2xs 0 $primary;
}
}
}
}
&-list {
@media (min-width: $megaNav-full-breakpoint) {
display: flex;
justify-content: flex-end;
margin: 0 0 0 auto;
}
}
.megaNav__topLevel-link {
// increase specificity to override > li > a' behaviour
@media (min-width: $megaNav-full-breakpoint) {
padding: $spacing-sm $spacing-lg;
color: white;
border: 0;
}
}
}
&__secondLevel {
//display: none;
@media (min-width: $megaNav-full-breakpoint) {
display: flex;
flex-wrap: wrap;
top: 100%;
box-shadow: 0 1em 1em rgba(black, 0.15);
&-item {
&.is-expanded {
background: #fff;
}
}
&-list {
position: relative;
margin: 0;
padding: $spacing-md 0 $spacing-md $spacing-md;
min-height: 60vh;
width: 25%; // yeah I really don't like this either (pt.1), please do feel free to think of a better way of doing this.
box-sizing: border-box;
}
}
&-link {
position: relative;
font-weight: 500;
}
&.has-children {
> a {
&:after {
content: '';
position: absolute;
display: block;
right: 0;
top: $row-padding-y;
width: 2em;
height: 2em;
background: url('#{$image-theme-directory-icon}/icon-gt-primary.svg') no-repeat center center;
background-size: 0.5em;
}
}
}
}
&__thirdLevel {
//display: none;
@media (min-width: $megaNav-full-breakpoint) {
font-size: 0.85em;
left: 100%;
right: -300%; // yeah I really don't like this either (pt.2), please do feel free to think of a better way of doing this.
top: 0;
bottom: 0;
background: white;
padding: $spacing-xl;
max-height: 100%;
overflow: auto !important; // sorry, this was lazy
box-sizing: border-box;
&-list {
columns: 2;
column-gap: $spacing-xl;
}
&-item.has-children {
> a {
&:after {
display: none;
}
}
}
.megaNav__thirdLevel-link {
// increase specificity to override > li > a' behaviour
padding: 0;
border: 0;
margin: 0 0 $spacing-xs;
}
}
}
&__topLevel-item {
//display: inline;
//
//> a, a:visited {
// font-weight: 500;
// color: #fff;
// display: inline-block;
// padding: 0.5em;
// background: transparent;
// transition: all 0.2s;
//
// @media (min-width: 60em) and (min-height: 30em) {
// @include typescale('lg');
// padding: 1em;
// }
//
// &:hover {
// box-shadow: inset 0 3px 0 $red;
// background: black;
// }
//}
}
}
/* global jQuery */
(function ($) {
// @TODO: at some point, it'd probably be nice if megaNavInit() sat here
// and was imported rather than being in app.js
})(jQuery);
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta charset="utf-8"/>
</head>
<body>
<p>The <code>.megaNav__topLevel-item</code> can have a class of <code>is-active</code> to apply its ‘active’ state (top red border)</p>
</body>
</html>