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="../../images/logo-uos.png" alt="University of Staffordshire 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">
<a class="megaNav__topLevel-link " href="">Courses</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Main menu</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item has-children megaNav__secondLevel-item-has-fourthLevel">
<a class="megaNav__secondLevel-link " href="">Undergraduate</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Courses</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 has-children">
<a class="megaNav__thirdLevel-link " href="">Subject Areas</a>
<div class="megaNav__level megaNav__fourthLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Undergraduate</button>
</div>
<ul class="megaNav__levelList megaNav__fourthLevel-list">
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Animation</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Art and Design</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Education</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Engineering</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__thirdLevel-item has-children">
<a class="megaNav__thirdLevel-link " href="">More Subject Areas</a>
<div class="megaNav__level megaNav__fourthLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Undergraduate</button>
</div>
<ul class="megaNav__levelList megaNav__fourthLevel-list">
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Animation</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Art and Design</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<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>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</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">Back to Courses</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>
</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">Back to Main menu</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">Back to Student Life</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>
</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">Back to Main menu</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>
</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>
</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>
</li>
</ul>
</div>
</nav>
<button class="toggle-search-site" id="global-search-open" aria-controls="search-site" aria-label="Open search form" type="button">
</button>
</div>
</div>
</header>
<div class="global-search" id="global-search" role="form">
<button class="global-search__close" id="global-search__close" type="button">
<svg width="0" height="0" style="position:absolute">
<symbol viewBox="0 0 16 16" id="icon-close-white" xmlns="http://www.w3.org/2000/svg">
<title>Atoms/Iconography/close-white@2x</title>
<path d="M16 1.61L9.61 8 16 14.39 14.39 16 8 9.61 1.61 16 0 14.39 6.39 8 0 1.61 1.61 0 8 6.39 14.39 0z" fill="currentColor" fill-rule="evenodd" />
</symbol>
</svg>
<span><svg xmlns="http://www.w3.org/2000/svg" class="icon icon-close-white">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-close-white"></use>
</svg></span>
<span class="visually-hidden">Close search</span>
</button>
<div class="global-search__container">
<div id="global-search__options" class="grid global-search__options">
<div class="col-1/4@tablet col-full@mobile">
<input class="global-search__scope" id="global-search__scope--courses" name="cScope" type="radio" value="courses" checked="">
<label for="global-search__scope--courses">Search courses</label>
<br>
<input class="global-search__scope" id="global-search__scope--site" name="cScope" type="radio" value="wholeSite">
<label for="global-search__scope--site">Search staffs.ac.uk</label>
</div>
<div class="col-3/4@tablet col-full@mobile">
<input class="global-search__keywords" id="global-search__keywords--courses" name="cQueryH" type="search" placeholder="Search courses">
<input class="global-search__keywords visually-hidden" id="global-search__keywords--whole-site" name="cQueryH" type="search" placeholder="Search staffs.ac.uk">
</div>
</div>
<p class="global-search__hint">Hit enter to search or ESC to close</p>
</div>
</div>
<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="{{ '/images/logo-uos.png' | path }}" alt="University of Staffordshire 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">
<a class="megaNav__topLevel-link " href="">Courses</a>
<div class="megaNav__level megaNav__secondLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Main menu</button>
</div>
<ul class="megaNav__levelList megaNav__secondLevel-list">
<li class="megaNav__secondLevel-item has-children megaNav__secondLevel-item-has-fourthLevel">
<a class="megaNav__secondLevel-link " href="">Undergraduate</a>
<div class="megaNav__level megaNav__thirdLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Courses</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 has-children">
<a class="megaNav__thirdLevel-link " href="">Subject Areas</a>
<div class="megaNav__level megaNav__fourthLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Undergraduate</button>
</div>
<ul class="megaNav__levelList megaNav__fourthLevel-list">
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Animation</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Art and Design</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Computer Science, AI and Robotics</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Drama, Performance and Theatre Studies</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Education</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Engineering</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<li class="megaNav__thirdLevel-item has-children">
<a class="megaNav__thirdLevel-link " href="">More Subject Areas</a>
<div class="megaNav__level megaNav__fourthLevel">
<div class="megaNav__levelHeader">
<button class="megaNav__closeLevel">Back to Undergraduate</button>
</div>
<ul class="megaNav__levelList megaNav__fourthLevel-list">
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Accounting and Finance</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Allied Health and Paramedic Science</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Animation</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Art and Design</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Augmented and Virtual Realities</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Biological and Biomedical Sciences</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">Business and Marketing</a></li>
<li class="megaNav__fourthLevel-item"><a class="megaNav__fourthLevel-link" href="">...</a></li>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</li>
<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>
</ul>
<div class="megaNav__levelMobileFooter">
<button class="megaNav__closeLevel">Back</button>
</div>
</div>
</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">Back to Courses</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>
</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">Back to Main menu</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">Back to Student Life</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>
</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">Back to Main menu</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>
</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>
</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>
</li>
</ul>
</div>
</nav>
<button class="toggle-search-site" id="global-search-open" aria-controls="search-site" aria-label="Open search form" type="button">
</button>
</div>
</div>
</header>
{% include '@global-search' with {
closed: true
} %}
.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: calc(#{$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;
font-weight: 500;
//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: 0.4em;
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: unset;
}
}
> .megaNav__secondLevel {
@media (min-width: $megaNav-full-breakpoint) {
display: flex;
margin-top: -$spacing-xs;
}
}
}
&__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;
background: transparent;
}
}
&__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;
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;
border: 0;
}
}
.megaNav__topLevel-item > .megaNav__topLevel-link {
white-space: nowrap;
}
}
&__secondLevel {
//display: none;
//padding-top: $spacing-4xl;
@media (min-width: $megaNav-full-breakpoint) {
display: flex;
flex-wrap: wrap;
top: 92%;
box-shadow: 0 1em 1em rgba(black, 0.15);
&-item {
&.is-expanded {
//background: #fff;
box-shadow: -1px -1px 0 #d70a26, -1px 1px 0 #d70a26;
box-shadow: 0 -1px 0 #d70a26, 0 1px 0 #d70a26;
> a:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 1px;
background: #fff;
z-index: 100;
}
}
}
&-list {
position: relative;
margin: 0;
padding: $spacing-xl 0 $spacing-md $spacing-md;
min-height: 70vh;
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;
background: #FFF;
&:after {
content: '';
position: absolute;
top: 5rem;
right: 0;
bottom: 1rem;
display: block;
width: 1px;
background: $red;
}
}
}
&-link {
position: relative;
font-weight: 500;
line-height: 1.5;
}
&.has-children {
> a {
&:after {
content: '';
position: absolute;
display: block;
right: 0;
top: 0.4em;
width: 2em;
height: 2em;
background: url('#{$image-theme-directory-icon}/icon-gt-primary.svg') no-repeat center center;
background-size: 0.5em;
}
}
}
}
&__thirdLevel, &__fourthLevel {
//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: #fff;
padding: $spacing-xl;
max-height: 100%;
overflow: auto !important; // sorry, this was lazy
box-sizing: border-box;
&-list {
columns: 2;
column-gap: $spacing-xl;
&:nth-child(2) {
//padding-top: $spacing-5xl;
}
}
&-item.has-children {
> a {
&:after {
//display: none;
}
}
}
.megaNav__thirdLevel-link, .megaNav__fourthLevel-link {
// increase specificity to override > li > a' behaviour
padding: 0;
border: 0;
margin: 0 0 $spacing-xs;
}
}
&-link {
line-height: 1.5;
}
}
&__secondLevel-item-has-fourthLevel {
&.is-expanded {
//background: #f7f8f9;
}
.megaNav__thirdLevel {
//background: #f7f8f9;
@media (min-width: $megaNav-full-breakpoint) {
padding: 0;
font-size: 1em;
&:after {
content: '';
position: absolute;
top: 5rem;
right: 0;
bottom: 1rem;
display: block;
width: 1px;
background: $red;
}
//box-shadow: 0 1em 1em rgba(black, 0.15);
&-item {
&.is-expanded {
background: #fff;
> a {
//box-shadow: -1px -1px 0 #d70a26, -1px 1px 0 #d70a26;
box-shadow: 0 -1px 0 #d70a26, 0 1px 0 #d70a26;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
bottom: 0;
display: block;
width: 1px;
background: #fff;
z-index: 100;
}
}
}
}
&-list {
margin: 0;
padding: $spacing-xl 0 $spacing-md $spacing-md;
min-height: 60vh;
box-sizing: border-box;
columns: unset;
width: 33.33%;
//box-shadow: -1px 0 0 #eee inset;
height: 100%;
position: relative;
&:after {
content: '';
position: absolute;
top: 5rem;
right: 0;
bottom: 1rem;
display: block;
width: 1px;
background: $red;
}
}
}
&-link {
position: relative;
font-weight: 500;
margin: 0;
}
.megaNav__thirdLevel-link {
@media (min-width: $megaNav-full-breakpoint) {
padding: 0.75rem 1.5rem 0.75rem;
}
//border-bottom: 1px solid #bebfc1;
}
}
}
&__thirdLevel {
//display: none;
@media (min-width: $megaNav-full-breakpoint) {
//padding-top: 6.7rem;
}
}
&__fourthLevel {
//display: none;
@media (min-width: $megaNav-full-breakpoint) {
left: 100%;
right: 0;
width: 200%;
//padding-top: 6.7rem;
}
}
&__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;
// }
//}
}
.meganav-mobile-section-link {
margin-top: 2rem;
a {
font-weight: 500;
font-size: 1.5rem;
}
@media (min-width: $megaNav-full-breakpoint) {
display: none;
}
}
}
.has-simple-children {
.megaNav__secondLevel {
.megaNav__secondLevel-list {
&:after {
display: none;
}
}
}
}
/* 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>