<nav class="navbar navbar-expand-md 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>
<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="#">Link 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 5</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>
<nav class="navbar navbar-expand-{{ breakpoint }} navbar-light bg-light">
{% include "@search_box" %}
<div class="collapse navbar-collapse navbar-wrapper nav-wrapper container-fluid{% if not_available %} not_here{% endif %}" id="navbarSupportedContent">
<div class="col-lg-9 main_nav">
<ul class="navbar-nav mr-auto">
{% for nav_item in nav_items %}
{% set active_nav = nav_item.active ? ' is-active' : '' %}
{% set active_nav_sr = nav_item.active ? ' <span class="sr-only">(current)</span>' : '' %}
{% set dropdown = nav_item.submenu_items ? ' dropdown' : '' %}
{% set dropdown_toggle = nav_item.submenu_items ? ' dropdown-toggle' : ''%}
{% set dropdown_id = nav_item.link_text ~ '_dropdown' %}
<li class="nav-item{{ dropdown }}{{ active_nav }}">
{% if nav_item.submenu_items %}
<div class="button-wrapper">
{% endif %}
<a class="nav-link{{ active_nav }}{{ dropdown_toggle }}{% if nav_item.active_item_sg %} active{% endif %}" href="{{ nav_item.url }}">{{ nav_item.link_text }}{{ active_nav_sr }}</a>
{% if nav_item.submenu_items %}
<button class="show-menu" id="{{ dropdown_id }}" 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="{{ dropdown_id }}">
{% for submenu_item in nav_item.submenu_items %}
<div class="dropdown_category">
{% if submenu_item.heading %}<h2><a href="{{ submenu_item.heading_url }}">{{ submenu_item.heading }}</a></h2>{% endif %}
<ul class="category_items">
{% for category_item in submenu_item.category_items %}
<li{% if category_item.active_item_sg %} class="active-sublink"{% endif %}>
<a href="{{ category_item.url }}"{% if category_item.active_item_sg %} class="active"{% endif %}>{{ category_item.link_text }}</a>
{% if category_item.sub_category_items %}
{% set dropdown_subid = category_item.link_text ~ '_dropdown' %}
<div class="dropdown-menu third-level" aria-labelledby="{{ dropdown_id }}">
<ul class="category_items">
{% for sub_category_items in category_item.sub_category_items %}
<li{% if sub_category_items.active_item_sg %} class="active-sublink"{% endif %}>
<a href="{{ sub_category_items.url }}"{% if sub_category_items.active_item_sg %} class="active"{% endif %}>{{ sub_category_items.link_text }}</a>
</li>
{% endfor %}
</ul>
</div><!-- end dropdown-menu -->
{% endif %}
</li>
{% endfor %}
</ul>
</div>
{% endfor %}
{% if nav_item.submenu_buttons %}
<div class="dropdown_category buttons">
{% for submenu_button in nav_item.submenu_buttons %}
{% include "@a_tag" with {
text: submenu_button.text,
url: submenu_button.url
} %}
{% endfor %}
</div>
{% endif %}
</div>
</div>
{% endif %}
</li>
{% endfor %}
<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{% if not_available %} not_here{% endif %}">
<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">
{% for utility_nav_item in utility_nav_items %}
<li class="nav-item">
<a class="nav-link" href="{{ utility_nav_item.url }}">{{ utility_nav_item.link_text }}</a>
</li>
{% endfor %}
</ul>
</div>
</nav>
</div><!-- end utility_nav -->
</div><!-- end navigation-wrapper -->
</nav>
{
"breakpoint": "md",
"sideNav": false,
"nav_items": {
"1": {
"url": "#",
"link_text": "Page 1",
"submenu_items": {
"1": {
"heading": "Group 1",
"heading_url": "#",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"2": {
"heading": "Group 2",
"heading_url": "#",
"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",
"heading_url": "#",
"category_items": {
"1": {
"link_text": "Subpage 1",
"url": "#"
},
"2": {
"link_text": "Subpage 2",
"url": "#"
},
"3": {
"link_text": "Subpage 3",
"url": "#"
}
}
},
"4": {
"heading": "Group 4",
"heading_url": "#",
"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"
}
},
"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": "Link 4"
},
"5": {
"url": "#",
"link_text": "Link 5"
},
"6": {
"url": "#",
"link_text": "Log Out"
}
}
}
var Drupal = Drupal || {};
var drupalSettings = drupalSettings || {};
(function (Drupal, drupalSettings) {
var docReady = function (fn) {
// Check if the DOM is already loaded
if (document.readyState === "complete" || document.readyState === "interactive") {
setTimeout(fn, 1);
} else {
document.addEventListener("DOMContentLoaded", fn);
}
};
// debulked onresize handler
function on_resize(c, t) {
onresize = function () {
clearTimeout(t);
t = setTimeout(c, 100);
};
return c;
}
// Navigation Menu Classes / Dropdown Support
function setupDropdownMenus() {
// Get all elements with class 'show-menu'
var showMenuElems = document.querySelectorAll('.show-menu:not(#overflow .show-menu)');
var showMenuElemsOverflow = document.querySelectorAll('#overflow .show-menu');
var more_button = document.querySelector('#more');
// Add click event listener to all 'show-menu' elements
showMenuElems.forEach(function (elem) {
elem.addEventListener('click', function () {
// Remove 'open' class from all 'show-menu' elements except for the current one
showMenuElems.forEach(function (e) {
if (e !== elem) {
e.parentNode.parentNode.classList.remove('open');
more_button.classList.remove('active');
}
});
// Toggle the 'open' class on the parent of the clicked 'show-menu' element
elem.parentNode.parentNode.classList.toggle('open');
more_button.classList.remove('active');
});
});
showMenuElemsOverflow.forEach(function (elem) {
elem.addEventListener('click', function () {
// Remove 'open' class from all 'show-menu' elements except for the current one
showMenuElemsOverflow.forEach(function (e) {
if (e !== elem) {
e.parentNode.parentNode.classList.remove('open');
}
});
// Toggle the 'open' class on the parent of the clicked 'show-menu' element
elem.parentNode.parentNode.classList.toggle('open');
});
});
// Get all elements with class 'dropdown-menu'
var dropdownMenuElems = document.querySelectorAll('.dropdown-menu');
// Add click event listener to all 'dropdown-menu' elements to stop event propagation
dropdownMenuElems.forEach(function (elem) {
elem.addEventListener('click', function (e) {
e.stopPropagation();
});
});
// Add click event listener to all 'show-menu' elements with class 'open' to remove 'open' class
var showMenuOpenElems = document.querySelectorAll('.show-menu.open:not(#overflow .show-menu.open)');
showMenuOpenElems.forEach(function (elem) {
elem.addEventListener('click', function () {
showMenuElems.forEach(function (e) {
e.classList.remove('open');
});
});
});
}
// Utility class for small screens
function setWindowClasses() {
var body = document.getElementsByTagName('body')[0];
if (window.innerWidth < 992) {
body.classList.add('small-screen');
} else {
body.classList.remove('small-screen');
}
}
// Overflow menu stuff
// Goal: As the viewport width decreases, take any links that don't fit in the horizontal menu bar and move them into a vertical dropdown menu.
// Hide links which may overflow and show links that should be visible
function do_calculate(runTwice = false) {
setWindowClasses();
// horizontal room we have to work with (the container)
// This gets recalculated below if we show the More button
var moreBtn = document.querySelector('.main_nav #more').offsetWidth;
var mainNavTotalSpace = document.querySelector('.main_nav').offsetWidth;
var navSpace = mainNavTotalSpace - moreBtn;
// calc the combined width of all links currently in the horizontal menu
var linksWidth = 0;
var navItems = document.querySelectorAll('.main_nav .navbar-nav > .nav-item');
for (var i = 0; i < navItems.length; i++) {
linksWidth += navItems[i].offsetWidth;
}
// now let's compare them to see if all the links fit in the container...
if (linksWidth > navSpace) {
// uh oh, the width of the links is greater than the width of their container...
// Make sure the more button is shown and recalculate the space variables
document.querySelector('#more').style.visibility = 'visible';
document.querySelector('#more-label').style.display = 'block';
moreBtn = document.querySelector('.main_nav #more').offsetWidth;
navSpace = document.querySelector('.main_nav').offsetWidth - moreBtn;
// keep moving links from the menu to the overflow until the combined width is less than the container...
while (linksWidth > navSpace) {
var lastLink = document.querySelector('.main_nav .navbar-nav > .nav-item:last-of-type');
var lastLinkWidth = lastLink.offsetWidth;
lastLink.dataset.foo = lastLinkWidth;
document.querySelector('#overflow').insertBefore(lastLink, document.querySelector('#overflow').firstChild);
var overflowDiv = document.querySelector('#overflow');
var overflowFirstChild = document.querySelector('#overflow').firstChild;
overflowDiv.insertBefore(lastLink, overflowFirstChild);
linksWidth -= lastLinkWidth;
}
} else {
// shazam, the width of the links is less than the width of their container...
// let's move links from the overflow back into the menu until we run out of room again...
// Get the first overflow link, if it exists
var firstOverflowLink = document.querySelector('#overflow > .nav-item:first-of-type');
// Start adding back
while (linksWidth <= navSpace && firstOverflowLink) {
var firstOverflowLinkWidth = firstOverflowLink.dataset.foo;
if (navSpace - linksWidth > firstOverflowLinkWidth) {
document.querySelector('#more').parentNode.insertBefore(firstOverflowLink, document.querySelector('#more'));
}
linksWidth += parseInt(firstOverflowLinkWidth);
firstOverflowLink = document.querySelector('#overflow > .nav-item:first-of-type');
}
// should we hide the overflow menu?
var overflowItems = document.querySelectorAll('#overflow > .nav-item');
if (overflowItems.length === 0) {
// Hide or modify elements only if the selector found no elements
var moreElement = document.querySelector('#more');
if (moreElement !== null) {
moreElement.style.visibility = 'hidden';
var moreLabelElement = document.querySelector('#more-label');
if (moreLabelElement !== null) {
moreLabelElement.style.display = 'none';
}
var dropdownElement = document.querySelector('#more #overflow .dropdown');
if (dropdownElement !== null) {
dropdownElement.classList.remove('open');
var buttonWrapperElement = document.querySelector('#more #overflow .dropdown .button-wrapper');
if (buttonWrapperElement !== null) {
buttonWrapperElement.classList.remove('show');
}
var dropdownMenuElement = document.querySelector('#more #overflow .dropdown .dropdown-menu');
if (dropdownMenuElement !== null) {
dropdownMenuElement.classList.remove('show');
}
var showMenuElement = document.querySelector('#more #overflow .dropdown .show-menu');
if (showMenuElement !== null) {
showMenuElement.setAttribute('aria-expanded', 'false');
}
}
}
}
}
// We have issues where fonts will load, causing the styles to need to be regenerated
// This gets passed as true when we DOMContentLoaded
if (runTwice) {
setTimeout(do_calculate, 100);
}
}
// Adds listeners to support overflow menu and keyboard navigation / advanced closing with clicks
function setupOverflow() {
// Adds a toggle for the menu when the menu label is clicked
const moreLabel = document.querySelector('#more-label');
if (moreLabel != null) {
moreLabel.addEventListener('click', function (e) {
document.querySelector('#more').classList.toggle('active');
var moreElement = document.getElementById('more');
if (moreElement !== null && moreElement.classList.contains('active')) {
document.querySelector('#more-label').focus();
}
});
}
function hideMenu(makeOverflowInactive) {
// If we try to toggle active on #more in focusout, but it is the target we are going to,
// we will open this back up due to the click class
// This gets called typically on our click classes when we click outside of #overflow
if (makeOverflowInactive) {
document.querySelector('#more').classList.remove('active');
}
// Hides the submenu items on focusout
document.querySelector('#more #overflow .dropdown').classList.remove('open');
document.querySelector('#more #overflow .dropdown .button-wrapper').classList.remove('show');
document.querySelector('#more #overflow .dropdown .dropdown-menu').classList.remove('show');
document.querySelector('#more #overflow .dropdown .show-menu').setAttribute('aria-expanded', 'false');
}
document.querySelector('#more').addEventListener('focusout', function (e) {
// console.log('more - focusout');
// console.log(document.activeElement);
// IF WE MATCH SOME CONDITIONS
// need to take a look at the event, e to make a determination
//hideMenu(true);
});
document.querySelector('#overflow').addEventListener('focusout', function (e) {
// If the target is one of the .show-menu buttons within #overflow, return
// so we dont close the overflow menu
if(e.target.classList.contains('show-menu')) {
return;
}
if (e.target == null || !e.relatedTarget || !e.relatedTarget.closest('#overflow')) {
// Don't bubble this event
e.stopPropagation();
makeOverflowInactive = e.relatedTarget != document.querySelector('#more') && e.relatedTarget != document.querySelector('#more-label');
hideMenu(makeOverflowInactive);
return true;
}
});
}
// Do we meet our requirements to initialize?
var moreArea = document.querySelector('#more');
let disableOverflow = drupalSettings.lehighClutch && drupalSettings.lehighClutch.disableMenuOverflow;
var doInitialize = (moreArea != null);
if (doInitialize) {
// Start Page Initialization
if (!disableOverflow) docReady(setupOverflow); // overflow state only
docReady(setWindowClasses);
if (!disableOverflow) docReady(do_calculate); // overflow state only
if (!disableOverflow) on_resize(do_calculate); // overflow state only
docReady(setupDropdownMenus);
}
})(Drupal, drupalSettings);
.navbar {
&-expand-md {
.navbar-nav {
align-items: flex-end;
}
}
&.bg-light {
background-color: $grey_20 !important;
.color-scheme-dark & {
background-color: $dark_mode_grey !important;
}
}
.nav-item {
padding: 0.5rem;
width: max-content;
position: unset;
.nav-link {
color: $lehigh_brown !important;
position: relative;
margin: 0 auto;
transition: all 0.2s ease-in-out;
border: 0;
font-weight: normal;
.color-scheme-dark & {
color: $white !important;
}
}
&.active {
.nav-link {
border-bottom: solid 3px $accent_color;
border-bottom: solid 3px var(--accent_color, $accent_color);
}
}
}
.dropdown-toggle {
&::after {
display: unset;
margin-left: 0;
vertical-align: 0;
content: "";
border-top: 0;
border-right: 0;
border-bottom: 0;
border-left: 0;
}
}
.main_nav {
.nav-link {
font-size: 1.25rem;
@include media-breakpoint-up(lg) {
font-size: 1rem;
}
}
.dropdown {
.button-wrapper {
display: block;
@include media-breakpoint-up(lg) {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}
@include media-breakpoint-down(md) {
text-align: unset;
.nav-link,
.show-menu {
display: inline-block;
font-size: 1.25rem;
}
}
i {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transition: all 0.2s ease;
transition: all 0.2s ease;
.color-scheme-dark & {
color: $white;
}
.no-js & {
&::after {
content: "+";
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
}
}
}
&.show {
i {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
}
.no-js & {
.show-menu {
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
&:hover,
&:focus-within {
.show-menu {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: 0.3s;
-moz-transition: 0.3s;
-o-transition: 0.3s;
transition: 0.3s;
}
.dropdown-menu {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: 1rem;
grid-template-rows: auto;
}
}
}
}
.dropdown-menu {
width: unset;
padding: 0;
border: 0;
border-radius: 0;
box-shadow: unset;
@include media-breakpoint-up(lg) {
width: 100vw;
max-width: $max_screen_width;
padding: $space_two $spacer $space_two $space_three;
box-shadow: 0 0.8rem 1rem rgba(0, 0, 0, 0.175);
}
&.show {
display: flex;
flex-direction: column;
grid-gap: unset;
margin: 0;
background-color: $off_white;
background-color: var(--off_white, $off_white);
z-index: 110;
@include media-breakpoint-up(lg) {
display: grid;
grid-template-columns: auto auto auto auto auto;
grid-gap: $space_and_half;
grid-template-rows: auto;
background-color: $white;
background-color: var(--white, $white);
}
@include media-breakpoint-up(lg) {
padding: $space_three;
}
.color-scheme-dark & {
background-color: $dark_mode_grey;
background-color: var(--dark_mode_grey, $dark_mode_grey);
}
.dropdown_category {
margin: 0;
padding: 0;
border-bottom: unset;
@include media-breakpoint-up(lg) {
&:has(.category_items) {
@include media-breakpoint-up(lg) {
border-bottom: 0;
}
.color-scheme-dark & {
border-bottom: 0;
}
}
}
&.buttons {
padding: 0;
border-bottom: 0;
}
}
}
.dropdown_category {
&.buttons {
border-top: 3px solid $grey_darkest;
border-top: 3px solid var(--grey_darkest, $grey_darkest);
@include media-breakpoint-up(lg) {
display: flex;
flex-direction: column;
align-items: flex-end;
grid-column: 5 / 6;
grid-row: 1 / 3;
border-top: 0;
}
.btn {
background-color: $grey_light;
color: $grey_darkest;
font-weight: bold;
border: 0;
border-radius: 0;
width: 100%;
margin: $spacer 0;
padding: $spacer;
text-align: left;
position: relative;
@include media-breakpoint-up(lg) {
width: 200px;
margin: 0 0 $spacer 0;
padding: $space_one_half;
}
}
}
h2 {
font-size: 1.25rem;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
margin: 0;
padding: $spacer;
border-top: 1px solid $grey_darkest;
border-top: 1px solid var(--grey_darkest, $grey_darkest);
@include media-breakpoint-up(lg) {
font-size: 1.125rem;
margin: 0;
border-top: 0;
padding: 0;
}
.color-scheme-dark & {
color: $white;
}
a {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
font-weight: 500;
text-decoration: none;
border-bottom: 0;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
border-bottom: 0;
}
&:hover,
&:focus {
border-bottom: 0;
text-decoration: underline;
}
}
}
ul {
@include reset-list-nav;
@include media-breakpoint-up(lg) {
margin: $spacer 0 0 0;
}
>li {
border-top: 1px solid $grey_darkest;
border-top: 1px solid var(--grey_darkest, $grey_darkest);
height: auto;
padding: $spacer;
@include media-breakpoint-up(lg) {
border-top: 0;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
padding: 0 0 0 $space_one_half;
margin: 0 0 $space_one_half 0;
&:last-of-type {
margin: 0;
}
}
a {
font-size: 1rem;
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
text-decoration: none;
font-weight: normal;
border-left: 2px solid $accent_color;
border-left: 2px solid var(--accent_color, $accent_color);
padding: 0 0 0 $space_one_half;
.color-scheme-dark & {
color: $white;
color: var(--white, $white);
}
@include media-breakpoint-up(lg) {
border-left: unset;
padding: 0;
}
&:hover,
&:focus {
text-decoration: underline;
@include transition;
}
}
}
}
}
&.third-level {
position: relative !important;
width: 100%;
box-shadow: unset;
padding: $spacer;
}
}
}
}
.navbar-toggler {
background-color: $grey_20 !important;
.navbar-toggler-icon {
background-color: $grey_20 !important;
}
}
.navbar-collapse {
@include media-breakpoint-down(sm) {
margin: 0 0 $space_three 0;
}
}
.search_icon {
transition: all 0.2s ease-in-out;
&:hover {
box-shadow: unset;
i {
color: $gold;
transition: all 0.2s ease-in-out;
}
}
}
}
.dropdown-item {
padding: $spacer $space_and_half;
position: relative;
margin: 0 auto;
transition: all 0.2s ease-in-out;
}
// overflow menu styles
#more {
display: block;
visibility: hidden;
#more-label {
display: none;
}
@include media-breakpoint-up(lg) {
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
position: absolute;
width: 100px;
height: 50px;
padding: 10px;
line-height: 30px;
top: 0;
right: 0;
text-align: center;
#overflow {
// display: none;
visibility: hidden;
background-color: $grey_darkest;
background-color: var(--grey_darkest, $grey_darkest);
position: absolute;
top: 50px;
right: 0;
border: 0;
clip: rect(0, 0, 0, 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
width: 1px;
&:not(:focus) {
visibility: hidden;
}
.nav-item {
a {
color: $white !important;
color: var(--white, $white) !important;
display: block;
text-align: left;
padding: 10px;
line-height: 30px;
}
.show-menu {
i {
color: $white !important;
color: var(--white, $white) !important;
}
}
&:hover,
&:focus,
&:focus-within {
a {
color: $grey_darkest !important;
color: var(--grey_darkest, $grey_darkest) !important;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
}
}
.show-menu {
i {
color: $grey_darkest !important;
color: var(--grey_darkest, $grey_darkest) !important;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
}
}
}
}
.button-wrapper {
flex-wrap: wrap;
.nav-link {
margin: 0;
}
.show-menu {
color: $white;
color: var(--white, $white);
}
}
&:hover,
&:focus {
.button-wrapper {
.show-menu {
color: $grey_darkest;
color: var(--grey_darkest, $grey_darkest);
}
}
}
.dropdown-menu {
&.show {
display: flex;
position: unset;
flex-direction: column;
width: 100%;
padding: $space_one_half;
}
.category_items {
margin: 0;
}
a {
color: $grey_darkest !important;
color: var(--grey_darkest, $grey_darkest) !important;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
&.btn {
span {
color: $grey_darkest !important;
color: var(--grey_darkest, $grey_darkest) !important;
}
}
}
}
h2 {
font-size: 1rem;
a {
font-weight: normal;
}
}
}
&.open {
.nav-link,
.show-menu {
color: $grey_darkest !important;
color: var(--grey_darkest, $grey_darkest) !important;
.color-scheme-dark & {
color: $white !important;
color: var(--white, $white) !important;
}
i {
color: var(--grey_darkest, $grey_darkest) !important;
}
}
}
}
}
#more-label {
display: block;
color: $white;
color: var(--white, $white);
i {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-o-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
@include transition;
}
}
&.active{
#more-label {
i {
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
@include transition;
}
}
#overflow {
// display: block;
visibility: visible;
border: unset;
clip: unset;
height: unset;
margin: unset;
overflow: unset;
padding: unset;
width: 500px;
z-index: 1000;
}
}
}
.small-screen & {
position: unset;
height: unset;
width: 100%;
#overflow {
display: block;
position: unset;
}
}
}
.form-control {
color: $grey_darkest;
}
// create option in styleguide to show navbar without quicklinks
.utility_nav.not_here {
display: none !important;
}
.nav-wrapper.not_here {
justify-content: flex-start !important;
}
No notes defined.