<!--UCPA Emergency Banner Alert-->
<div id="emergencyalert">
<div id="AppArmorAlertID_2"></div>
<script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script>
</div>
<!--End UCPA Emergency Banner Alert-->
<header class="header">
<div class="container-fluid">
<div class="row logo-wrapper">
<button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
</button>
<div class="logo">
<picture class="image lehigh-logo e11y-ok">
<a href="#" class="logo__link">
<img class="web" src="/img/lehigh-logo.svg" alt="Lehigh University logo" width="200" height="43" />
<span class="u-a11y-text">Go to homepage</span>
</a>
</picture>
</div><!-- end logo -->
<div class="mobile-search">
<button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
</div><!-- end mobile-search -->
</div>
</div>
<div class="header-wrapper container-fluid">
<div class="row">
<div class="col title">
<span class="site-title"><a href="#">Site Name That Happens to be Pretty Long</a><span class="site-slogan">Site Slogan</span></span>
</div><!-- title -->
</div>
<div class="navigation-wrapper">
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="searchbox">
<form class="form-inline my-2 my-lg-0 main-search">
<button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
<div class="search-container input-group ">
<input class="form-control border-right-0 border" type="search" placeholder="Search" aria-label="Search">
<div class="search_buttons_wrapper">
<span class="input-group-append">
<button data-drupal-selector="edit-submit" id="edit-submit" class="btn btn-outline-info border-left-0 border-right-0 border js-form-submit form-submit" type="submit"><i class="fas fa-search"></i><span class="sr-only">Search</span></button>
</span>
<span class="input-group-append close_search">
<button class="btn btn-outline-danger border-left-0 border" type="button"><i class="fa fa-times"></i><span class="sr-only">Close the search box</span></button>
</span>
</div><!-- end search_buttons_wrapper -->
</div>
</form>
</div>
<div class="collapse navbar-collapse navbar-wrapper nav-wrapper container-fluid" id="navbarSupportedContent">
<div class="col-lg-9 main_nav">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Page 1</a>
<button class="show-menu" id="Page 1_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Page 1_dropdown">
<div class="dropdown_category">
<h2><a href="">Group 1</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 2</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
<li>
<a href="#">Subpage 4</a>
</li>
<li>
<a href="#">Subpage 5</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 3</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category">
<h2><a href="">Group 4</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
<div class="dropdown_category buttons">
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 1</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 2</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 3</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
<a href="#" class="btn btn-primary " role="button">
<span class="button_text">Button 4</span>
<span class="arrow fal fa-chevron-right"></span>
</a>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 6</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 7</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 8</a>
</li>
<li class="nav-item dropdown">
<div class="button-wrapper">
<a class="nav-link dropdown-toggle" href="#">Page 9</a>
<button class="show-menu" id="Page 9_dropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"><i class="fas fa-plus"></i><span class="sr-only">Show menu</span></button>
<div class="dropdown-menu" aria-labelledby="Page 9_dropdown">
<div class="dropdown_category">
<h2><a href="">Group 1</a></h2>
<ul class="category_items">
<li>
<a href="#">Subpage 1</a>
</li>
<li>
<a href="#">Subpage 2</a>
</li>
<li>
<a href="#">Subpage 3</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 10</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 11</a>
</li>
<div id="more">
<button type="button" id="more-label">More <i class="fas fa-plus"></i><span class="sr-only">Show more menu items</span></button>
<div id="overflow">
</div>
</div>
</ul>
</div><!-- end main_nav -->
<div class="col-lg-3 utility_nav">
<nav class="navbar navbar-expand-utility navbar-expand navbar-light bg-light">
<div class="ut_wrapper">
<button class="navbar-toggler quick-link-btn" type="button" data-toggle="collapse" data-target="#utility_nav_ut" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle Quick Link">
<span class="navbar-toggler-icon">Quick Links <i class="fas fa-chevron-down"></i></span>
</button>
</div>
<div class="ut_nav">
<ul class="navbar-nav navbar-collapse mr-auto utility_nav_ut collapse" id="utility_nav_ut">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Log Out</a>
</li>
</ul>
</div>
</nav>
</div><!-- end utility_nav -->
</div><!-- end navigation-wrapper -->
</nav>
</div><!-- end navigation-wrapper -->
</div><!-- end header-wrapper -->
</header>
<!--UCPA Emergency Banner Alert-->
<div id="emergencyalert"><div id="AppArmorAlertID_2"></div><script type="text/javascript" src="//lehigh.apparmor.com/Notifications/Feeds/Javascript/?AlertID=2" async></script></div>
<!--End UCPA Emergency Banner Alert-->
<header class="header">
<div class="container-fluid">
<div class="row logo-wrapper">
<button class="navbar-toggler main-button" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="fas fa-bars icon-default"><span class="sr-only">Open menu</span></i><i class="fa fa-times icon-hover"><span class="sr-only"><span>Close menu</span></i></span>
</button>
<div class="logo">
{% block logo %}
{% include "@images--lehigh_logo" with { logo_link: site_url } %}
{% endblock logo %}
</div><!-- end logo -->
<div class="mobile-search">
<button role="button" class="btn search_icon"><i class="fas fa-search"></i><span class="sr-only">Open search bar</span></button>
</div><!-- end mobile-search -->
</div>
</div>
<div class="header-wrapper container-fluid">
<div class="row">
<div class="col title">
<span class="site-title"><a href="{{ site_url }}">{{ site_name }}</a>{% if site_slogan %}<span class="site-slogan">{{ site_slogan }}</span>{% endif %}</span>
</div><!-- title -->
</div>
<div class="navigation-wrapper">
{% block main_navbar %}
{% for main_nav_item in main_nav_items %}
{% include "@navbar_header" with main_nav_item %}
{% endfor %}
{% endblock main_navbar %}
</div><!-- end navigation-wrapper -->
</div><!-- end header-wrapper -->
</header>
{
"site_name": "Site Name That Happens to be Pretty Long",
"site_url": "#",
"site_slogan": "Site Slogan",
"site_logo": "/img/lehigh-logo.svg",
"main_nav_items": {
"1": {
"sideNav": false,
"mainNav": true,
"breakpoint": "lg",
"nav_items": {
"1": {
"url": "#",
"link_text": "Page 1",
"submenu_items": {
"1": {
"heading": "Group 1",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"2": {
"heading": "Group 2",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
},
"4": {
"link_text": "Subpage 4",
"url": "#"
},
"5": {
"link_text": "Subpage 5",
"url": "#"
}
}
},
"3": {
"heading": "Group 3",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"4": {
"heading": "Group 4",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
}
},
"submenu_buttons": {
"1": {
"text": "Button 1",
"url": "#"
},
"2": {
"text": "Button 2",
"url": "#"
},
"3": {
"text": "Button 3",
"url": "#"
},
"4": {
"text": "Button 4",
"url": "#"
}
}
},
"2": {
"url": "#",
"link_text": "Page 2"
},
"3": {
"url": "#",
"link_text": "Page 3"
},
"4": {
"url": "#",
"link_text": "Page 4"
},
"5": {
"url": "#",
"link_text": "Page 5"
},
"6": {
"url": "#",
"link_text": "Page 6"
},
"7": {
"url": "#",
"link_text": "Page 7"
},
"8": {
"url": "#",
"link_text": "Page 8"
},
"9": {
"url": "#",
"link_text": "Page 9",
"submenu_items": {
"1": {
"heading": "Group 1",
"url": "#",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
}
}
},
"10": {
"url": "#",
"link_text": "Page 10"
},
"11": {
"url": "#",
"link_text": "Page 11"
}
}
}
},
"utility_nav_items": {
"1": {
"url": "#",
"link_text": "Link 1"
},
"2": {
"url": "#",
"link_text": "Link 2"
},
"3": {
"url": "#",
"link_text": "Link 3"
},
"4": {
"url": "#",
"link_text": "Log Out"
}
}
}
var Drupal = Drupal || {};
(function (Drupal) {
function showSearch(e) {
e.preventDefault();
document.querySelector('.main-search .search-container').classList.remove('hide');
document.querySelector('.main-search .search-container').classList.add('show');
document.querySelector('.mobile-search').classList.add('hide');
document.querySelector('.main-search .search-container.show input[type=search]').focus();
return true;
}
function closeSearch(e) {
e.preventDefault();
document.querySelector('.main-search .search-container').classList.add('hide');
document.querySelector('.mobile-search').classList.remove('hide');
document.querySelector('.main-search .search-container').classList.remove('show');
return true;
}
function focusOutCloseSearch(e) {
if (e.relatedTarget && !e.relatedTarget.closest('.main-search .search-container')) {
closeSearch(e);
}
}
function keyboardSearchShortcuts() {
document.addEventListener('keydown', function (e) {
if (document.activeElement.closest('.main-search .search-container')) {
if (e.keyCode === 27) {
closeSearch(e);
}
}
});
}
function searchIconFocus(e) {
if (e.relatedTarget && !e.relatedTarget.closest('.main-search .search-container')) {
showSearch(e);
}
}
function openSearch(e) {
document.querySelector('.main-button').classList.remove('collapsed');
document.querySelector('.main-button').setAttribute("aria-expanded", "true");
document.querySelector('.navigation-wrapper .navbar-wrapper').classList.add('show');
}
function closeQuickLink(e) {
document.querySelector('.utility_nav_ut').classList.remove('show');
document.querySelector('.quick-link-btn').classList.add('collapsed');
document.querySelector('.quick-link-btn').setAttribute("aria-expanded", "false");
}
document.addEventListener("DOMContentLoaded", function () {
document.querySelector('.main-search .search-container').classList.add('hide');
document.querySelector('.main-search .search_icon').addEventListener('focus', searchIconFocus);
document.querySelector('.main-search .search_icon').addEventListener('click', showSearch);
document.querySelector('.main-search .close_search button').addEventListener('click', closeSearch);
document.querySelector('.mobile-search .search_icon').addEventListener('focus', searchIconFocus);
document.querySelector('.mobile-search .search_icon').addEventListener('click', showSearch);
document.querySelector('.mobile-search .search_icon').addEventListener('focus', openSearch);
document.querySelector('.mobile-search .search_icon').addEventListener('click', openSearch);
document.querySelector('.mobile-search .search_icon').addEventListener('focus', closeQuickLink);
document.querySelector('.mobile-search .search_icon').addEventListener('click', closeQuickLink);
})
})(Drupal);
.header {
position: relative;
-webkit-box-shadow: 0 0 10px 0 $drop_shadow;
box-shadow: 0 0 10px 0 $drop_shadow;
.color-scheme-dark & {
-webkit-box-shadow: 0 0 10px 0 $drop_shadow_darkmode;
box-shadow: 0 0 10px 0 $drop_shadow_darkmode;
}
&> .container-fluid {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
padding: 0;
}
.logo-wrapper {
max-width: $max_screen_width;
margin: 0 auto;
padding: $space-one-half 15px;
display: flex;
align-items: center;
justify-content: space-between;
.logo {
display: flex;
padding: 0;
.lehigh-logo {
margin: 0;
max-width: 200px;
img {
max-width: 200px;
width: 200px;
}
}
}
.main-button {
@include media-breakpoint-up(lg) {
display: none;
}
@include transition;
margin: 0 0 0 (-$space_three_quarter);
.navbar-toggler-icon {
position: relative;
background-image: none;
color: $white;
color: var(--white, $white);
i {
font-size: 2rem;
position: absolute;
left: 0;
}
}
&[aria-expanded="false"] {
.navbar-toggler-icon {
.fas.fa-bars {
transition: opacity .3s, transform .3s;
opacity: 1;
.no-js & {
transform: rotate(90deg);
&::after {
content: "|||";
font-size: 2rem;
font-weight: 600;
font-style: normal;
}
}
}
.fa.fa-times {
transition: opacity .3s, transform .3s;
transform: rotate(-180deg) scale(.5);
opacity: 0;
}
}
}
&[aria-expanded="true"] {
.navbar-toggler-icon {
.fas.fa-bars {
transition: opacity .3s, transform .3s;
transform: rotate(180deg) scale(.5);
opacity: 0;
}
.fa.fa-times {
transition: opacity .3s, transform .3s;
transform: rotate(0deg) scale(1);
opacity: 1;
}
}
}
}
.mobile-search {
.search_icon {
padding: $space_one_half 0 $space_one_half $space_one_half;
i,
svg {
color: $white;
color: var(--white, $white);
font-size: 1.75rem;
}
.sr-only {
color: $white;
color: var(--white, $white);
}
}
@include media-breakpoint-up(lg) {
&.hide {
visibility: hidden;
}
}
}
}
&-wrapper {
background-color: $grey_20 !important;
background-color: var(--grey_20, $grey_20) !important;
margin: 0 auto;
padding: $space_one_half 0 0 0;
.row {
max-width: $max_screen_width;
margin: 0 auto;
padding: 0 15px;
.title {
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: flex-end;
margin: 0;
padding: $spacer 0;
.site-title {
margin: 0;
a {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
font-weight: bold;
font-size: 2rem;
}
}
.site-slogan {
color: $base_font;
color: var(--base_font, $base_font);
font-size: 1.5rem;
margin: 0 0 0 $space-three-quarter;
padding: 0 0 0 $space-three-quarter;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
}
}
}
.navigation-wrapper {
position: absolute;
top: 59px;
overflow-y: auto;
-webkit-box-shadow: 0 0 10px 0 $grey_darkest;
box-shadow: 0 0 10px 0 $grey_darkest;
z-index: 9999;
.color-scheme-dark & {
box-shadow: unset;
}
@include media-breakpoint-up(lg) {
position: unset;
max-width: $max_screen_width;
margin: 0 auto;
top: unset;
max-height: unset;
overflow-y: unset;
-webkit-box-shadow: unset;
box-shadow: unset;
}
.navbar {
width: 70vw;
background-color: transparent !important;
padding: 0;
@include media-breakpoint-up(lg) {
width: unset;
}
.main-button {
@include transition;
.navbar-toggler-icon {
background-image: none;
i {
font-size: 1.9rem;
}
}
&[aria-expanded="false"] {
.navbar-toggler-icon {
.fas.fa-bars {
@include transition;
display: block;
}
.fa.fa-times {
@include transition;
display: none;
}
}
}
&[aria-expanded="true"] {
.navbar-toggler-icon {
.fas.fa-bars {
@include transition;
display: none;
}
.fa.fa-times {
@include transition;
display: block;
}
}
}
}
.navbar-collapse {
align-items: flex-end;
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
margin: 0;
padding: 0 $spacer 0 0;
&:has(> div.utility_nav) {
justify-content: flex-end;
}
@include media-breakpoint-up(lg) {
border: 0;
background-color: unset;
}
&.fade {
@include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
&.collapse {
&:not(.show) {
display: none;
}
}
&.collapsing {
position: relative;
height: 0;
overflow: hidden;
@include transition($transition-collapse);
}
}
.navbar-nav {
flex-wrap: wrap;
align-items: flex-start;
background-color: $off_white;
background-color: var(--off_white, $off_white);
width: 70vw;
@include media-breakpoint-up(lg) {
background-color: unset;
width: unset;
}
}
.nav-item {
padding: 0;
width: 100%;
&:last-of-type {
border-bottom: 0;
}
@include media-breakpoint-up(lg) {
padding: 0 $space_one_half;
border-bottom: 0;
width: unset;
}
.nav-link {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
padding: $spacer $space_one_half;
transition: none !important;
@include media-breakpoint-up(lg) {
padding-right: $space_one_half;
}
}
.button-wrapper {
.show-menu {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
width: 1rem;
.color-scheme-dark & {
i {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
}
}
}
}
&.is-active {
@include media-breakpoint-up(lg) {
background-color: $lehigh_brown;
background-color: var(--lehigh_brown, $lehigh_brown);
}
.nav-link,
.show-menu {
@include media-breakpoint-up(lg) {
color: $white !important;
color: var(--white, $white) !important;
}
}
&:focus-within {
i {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
}
}
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
.nav-link,
.show-menu {
color: $white !important;
color: var(--white, $white) !important;
i {
color: $white !important;
color: var(--white, $white) !important;
}
}
}
&.open,
&:hover,
&:focus {
.show-menu {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
}
}
}
}
&:first-of-type {
&.is-active {
@include media-breakpoint-up(lg) {
background-color: unset;
}
}
.nav-link,
.show-menu {
@include media-breakpoint-up(lg) {
color: inherit !important;
}
}
&:hover,
&:focus-within {
@include media-breakpoint-up(lg) {
background-color: $white;
background-color: var(--white, $white);
}
}
}
&:hover,
&:focus-within,
&.open {
@include media-breakpoint-up(lg) {
background-color: $white;
background-color: var(--white, $white);
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
.show-menu {
i {
color: $white !important;
color: var(--white, $white) !important;
}
}
}
}
.nav-link {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
}
}
.button-wrapper {
.show-menu {
color: $lehigh_brown;
color: var(--lehigh_brown, $lehigh_brown);
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
}
}
}
}
}
.main_nav,
.utility_nav {
padding: 0;
}
.main_nav {
order: 2;
@include media-breakpoint-up(lg) {
order: 1
}
}
.searchbox {
@include media-breakpoint-up(lg) {
position: absolute;
right: 0;
top: -134px;
z-index: 90;
}
.main-search {
order: 2;
margin: 0 !important;
@include media-breakpoint-down(lg) {
display: flex;
flex-direction: column;
}
@include media-breakpoint-up(lg) {
order: unset;
}
.search_icon {
display: none;
color: $accent_color;
color: var(--accent_color, $accent_color);
font-size: 1.75rem;
padding: 0 $space_one_half 0 0;
line-height: 0;
width: unset;
position: unset;
&::after {
content: "";
position: unset;
}
}
.search-container {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
align-items: center;
-webkit-transition: all 0.25s;
-moz-transition: all 0.25s;
transition: all 0.25s;
position: unset;
height: unset;
width: calc(70vw - $spacer);
padding: $space_one_half 0 $space_one_half;
justify-content: space-between;
z-index: 100;
@include media-breakpoint-up(lg) {
&.hide {
display: none;
}
}
.no-js & {
justify-content: flex-end;
}
@include media-breakpoint-up(lg) {
// position: absolute;
// right: 0;
// top: 63px;
// height: calc($spacer + 50px);
width: 450px;
}
input[type="search"] {
color: $base_font;
width: 100%;
font-size: 1rem;
border: 0 !important;
@include media-breakpoint-down(lg) {
border-radius: 5px;
}
@include media-breakpoint-up(lg) {
width: 300px;
height: 50px;
}
}
.search_buttons_wrapper {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
background-color: $lehigh_brown;
@include media-breakpoint-down(md) {
.close_search {
display: none;
}
}
}
button[type="submit"],
button[type="button"] {
// width: unset;
width: 50px;
height: 50px;
padding: 10px;
position: unset;
border: 0 !important;
@include media-breakpoint-down(lg) {
padding: $space_one_half;
}
&::after {
content: "";
position: unset;
}
.fa-search,
.fa-times {
font-size: 1.5rem;
height: 24px;
width: 24px;
text-align: center;
}
.no-js & {
.fa-search {
&::after {
content: "O";
font-size: 1.5rem;
font-weight: 600;
font-style: normal;
}
}
.fa-times {
&::after {
content: "X";
font-size: 1.5;
font-weight: 600;
font-style: normal;
}
}
}
}
}
}
}
.utility_nav {
display: flex;
justify-content: flex-start;
order: 1;
z-index: 100;
@include media-breakpoint-up(lg) {
justify-content: flex-end;
order: 2;
}
.navbar-nav {
justify-content: flex-end;
@include media-breakpoint-up(lg) {
margin: 0 !important;
}
.nav-item {
padding: 0;
}
}
.utility_nav_ut {
order: 2;
}
.ut_wrapper {
display: flex;
flex-direction: column;
align-items: center;
@include media-breakpoint-up(lg) {
flex-direction: row;
}
}
.navbar {
background-color: $lehigh_brown !important;
background-color: var(--lehigh_brown, $lehigh_brown) !important;
display: flex;
flex-direction: column;
@include media-breakpoint-up(lg) {
border: 4px solid $white;
border: 4px solid var(--white, $white);
}
&.navbar-expand-utility {
.navbar-toggler {
display: block !important;
background-color: unset !important;
border-color: unset;
border: 0;
margin: 0;
padding: $spacer;
border-radius: 0;
order: 2;
.navbar-toggler-icon {
color: $white;
color: var(--white, $white);
background-color: unset !important;
background-image: none;
width: unset;
height: unset;
}
&[aria-expanded="false"] {
i {
transform: rotate(0deg);
@include transition;
.no-js & {
&::after {
content: "V";
font-size: 1.1rem;
font-weight: 600;
font-style: normal;
}
}
}
}
&[aria-expanded="true"] {
i {
transform: rotate(180deg);
@include transition;
}
}
}
}
.ut_nav {
order: 3;
width: 100%;
@include media-breakpoint-up(lg) {
order: unset;
}
.visually-hidden {
color: $white;
color: var(--white, $white);
}
button {
&.visually-hidden {
color: $black;
color: var(--black, $black);
}
}
.navbar-nav {
display: block !important;
width: 70vw;
height: 100%;
transition: height 0.2s ease;
padding: 0;
@include media-breakpoint-up(lg) {
position: absolute;
top: 59px;
right: 0;
width: 20vw;
height: fit-content;
box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.175);
.color-scheme-dark & {
-webkit-box-shadow: 0 0.8rem 1rem $drop_shadow_darkmode;
box-shadow: 0 0.8rem 1rem $drop_shadow_darkmode;
}
}
/////////// contextual div has position relative on it and it is screwing up the quick navigation so this helps with it when you are logged in
.user-logged-in & {
top: 5px;
right: -176px;
}
&.fade {
@include transition($transition-fade);
&:not(.show) {
opacity: 0;
}
}
&.collapse {
&:not(.show) {
display: none !important;
}
}
&.collapsing {
position: absolute;
height: 0;
overflow: hidden;
transition: height .2s ease;
@include media-breakpoint-up(lg) {
@include transition($transition-collapse);
}
}
.nav-item {
padding: $space_one_half;
width: 100%;
background-color: $white;
background-color: var(--white, $white);
&:last-of-type {
border-bottom: 0;
}
.nav-link {
padding: 0;
font-size: .875rem;
padding: $space_one_half;
color: $base_font !important;
color: var(--base_font, $base_font) !important;
&:hover,
&:focus {
background-color: unset !important;
text-decoration: underline;
.color-scheme-dark & {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
}
}
}
.color-scheme-dark & {
&:hover,
&:focus {
.nav-link {
color: $lehigh_brown !important;
color: var(--lehigh_brown, $lehigh_brown) !important;
}
}
}
}
}
}
}
}
.no-js & {
.navbar-expand-utility {
&:hover,
&:focus-within {
.ut_nav {
.navbar-nav {
&.collapse {
&:not(.show) {
display: block !important;
}
}
}
}
}
}
}
}
}
}
Display the site header.