There are no notes for this item.
<header class="iowa-bar iowa-bar--full" data-uids-header>
<div class="iowa-bar__container">
<div class="logo logo--tab">
<a href="https://www.uiowa.edu">
<div class="element-invisible">The University of Iowa</div>
<svg xmlns="http://www.w3.org/2000/svg" class="logo-icon" aria-labelledby="logo-header" role="img" viewBox="0 0 311.6 90.2">
<path class="st0" d="M40 18.8h-7.3v52.4H40v19H0v-19h7.3V18.8H0V0h40V18.8z" />
<path class="st0" d="M93.8 90.2h-29c-10.5 0-17.4-6.9-17.4-18.2V18.2C47.4 7 54.4 0 64.8 0h29c10.5 0 17.4 7 17.4 18.2V72C111.2 83.2 104.2 90.2 93.8 90.2zM85.6 71.2V18.8H73v52.4H85.6z" />
<path class="st0" d="M122.6 18.8h-6.4V0h38v18.9H147l6.5 43.4L167 0h19.2l14.4 62.3 5.2-43.4h-6.6V0h37.5v18.9h-6.2l-11.3 71.4h-30.6l-11.8-53.2 -12.1 53.1h-29.4L122.6 18.8z" />
<path class="st0" d="M230.1 71.2h6.9L250.7 0h41l13.5 71.2h6.4v19H281l-2.9-22h-15.2l-2.7 22h-30L230.1 71.2 230.1 71.2zM276.5 51.7l-5.8-36.4 -6 36.4H276.5z" />
<image src="../../assets/images/uiowa-primary.png">
<title id="logo-header">University of Iowa</title>
</image>
</svg>
</a>
</div>
</div>
</header>
.iowa-bar {
position: relative;
z-index: 2;
display: block;
min-height: auto;
background: var(--brand-secondary); }
@media (min-width: 980px) {
.iowa-bar {
background: var(--brand-primary); } }
.iowa-bar .logo--tab {
margin-right: 20px; }
@media (min-width: 84.375em) {
.iowa-bar .logo--tab {
margin-left: -12px;
padding: 27px 20px 20px; } }
.iowa-bar .site-name {
width: 100%;
padding: 1.25rem;
background: var(--brand-primary); }
@media (min-width: 980px) {
.iowa-bar .site-name {
width: auto;
background: transparent;
padding: 0; } }
@media (min-width: 84.375em) {
.iowa-bar .site-name {
margin: 5px 0 0 0; } }
.iowa-bar__container {
max-width: 81.875em;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto; }
@media (min-width: 980px) {
.iowa-bar__container {
justify-content: flex-start;
display: flex; } }
@media (min-width: 980px) {
.iowa-bar__container {
margin-right: auto;
margin-left: auto; } }
@media (min-width: 84.375em) {
.iowa-bar--narrow.horizontal .iowa-bar__container,
.iowa-bar--narrow.mega .iowa-bar__container {
position: relative; } }
@media (min-width: 980px) {
.iowa-bar--full {
height: 80px;
background: var(--brand-primary); } }
@media (min-width: 980px) {
.iowa-bar--narrow {
min-height: 50px;
position: relative; } }
.iowa-bar--narrow .logo--tab {
margin-right: 10px; }
@media (min-width: 980px) {
.iowa-bar--narrow .logo--tab {
height: 56px;
width: 119px;
padding: 15px; } }
@media (min-width: 84.375em) {
.iowa-bar--narrow .logo--tab {
margin-bottom: -6px; } }
.search-is-open .iowa-bar--narrow .logo--tab {
visibility: none;
opacity: 0; }
@media (min-width: 980px) {
.search-is-open .iowa-bar--narrow .logo--tab {
display: flex;
opacity: 1;
visibility: visible; } }
.iowa-bar--narrow .logo-icon {
height: 20px; }
@media (min-width: 980px) {
.iowa-bar--narrow .logo-icon {
height: 26px; } }
@media (min-width: 84.375em) {
.iowa-bar--narrow .parent-site-name {
padding: 6px 0 0 0; } }
.iowa-bar--narrow .site-name {
font-size: 1rem;
margin: 0;
padding: 1.25rem;
background: var(--brand-primary); }
@media (min-width: 980px) {
.iowa-bar--narrow .site-name {
background: transparent;
font-size: 1rem;
padding: 0; } }
@media (min-width: 84.375em) {
.iowa-bar--narrow .site-name {
padding: 6px 0 0 0; } }
.iowa-bar__below {
z-index: 2;
border-bottom: 1px solid #e6e5e5;
background: #fff; }
.iowa-bar__below .iowa-bar__container {
flex-wrap: wrap;
justify-content: space-between;
margin-right: 0;
margin-left: 0; }
@media (min-width: 980px) {
.iowa-bar__below .iowa-bar__container {
display: flex;
position: unset;
min-height: 90px;
justify-content: unset;
margin-right: auto;
padding-left: 1.25rem; } }
@media (min-width: 84.375em) {
.iowa-bar__below .iowa-bar__container {
margin-left: auto;
padding-left: 0; } }
.iowa-bar__below .site-name {
margin: 0;
text-align: left;
font-size: 1.8rem; }
@media (min-width: 980px) {
.iowa-bar__below .site-name {
width: 75%;
padding: 25px 20px 25px 0;
background: transparent;
font-size: 2rem; } }
@media (min-width: 84.375em) {
.iowa-bar__below .site-name {
font-size: 2.2rem; } }
@media (min-width: 980px) {
.search-is-open .iowa-bar__below .site-name {
display: none; } }
@media (min-width: 980px) {
.header-sticky .iowa-bar {
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
transition: transform 0.4s; } }
@media (min-width: 980px) {
.header-sticky.scroll-up .iowa-bar__below .search-overlay .uids-search,
.header-sticky.scroll-down .iowa-bar__below .search-overlay .uids-search {
margin-top: 3px;
border-bottom: none; } }
@media (min-width: 980px) {
.header-sticky.scroll-up .iowa-bar__below .iowa-bar__container,
.header-sticky.scroll-down .iowa-bar__below .iowa-bar__container {
min-height: 60px; } }
@media (min-width: 980px) {
.header-sticky.scroll-up .iowa-bar__below .site-name,
.header-sticky.scroll-down .iowa-bar__below .site-name {
padding: 0;
transition: transform 0.4s;
font-size: 1.6rem; } }
@media (min-width: 980px) {
.header-sticky.scroll-up .iowa-bar__below .search-button,
.header-sticky.scroll-down .iowa-bar__below .search-button {
height: 60px;
padding: 7px 25px 7px 18px; } }
@media (min-width: 980px) {
.header-sticky.scroll-down .iowa-bar {
transform: translate3d(0, -100%, 0); } }
@media (min-width: 980px) {
.header-sticky.scroll-down .iowa-bar .logo--tab {
margin-top: -17px; } }
@media (min-width: 980px) {
.header-sticky.scroll-up .iowa-bar {
transform: none; } }
@media (min-width: 980px) {
.header-sticky.scroll-up:not(.menu-open) .iowa-bar {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35); } }
const scrollUp = 'scroll-up';
const scrollDown = 'scroll-down';
const menuDrawer = document.querySelector('.header-not-sticky .o-canvas__drawer');
const menuDrawerMobile = document.querySelector('.o-canvas__drawer');
const header = document.querySelector('[data-uids-header]');
const menuMq = window.matchMedia('(min-width: 855px)');
let height = header.clientHeight;
let lastScroll = 0;
// navigation scroll
window.addEventListener('scroll', function () {
const currentScroll = window.pageYOffset;
// remove classes if scrolled all the way up
if (currentScroll <= height) {
body.classList.remove(scrollUp);
body.classList.remove(scrollDown);
if (menuMq.matches) {
if (menuDrawer) {
menuDrawer.style.top = Math.max(height - this.scrollY) + 'px';
}
} else {
menuDrawerMobile.style.top = Math.max(height - this.scrollY) + 'px';
}
return;
}
// if contains lock don't add anything....
if (currentScroll > lastScroll && !body.classList.contains('o-canvas--lock')) {
// down
if (currentScroll > height) {
body.classList.remove(scrollUp);
body.classList.add(scrollDown);
}
} else if (currentScroll < lastScroll && body.classList.contains(scrollDown)) {
// up
body.classList.remove(scrollDown);
body.classList.add(scrollUp);
}
lastScroll = currentScroll;
});
window.addEventListener('orientationchange', function (event) {
const afterOrientationChange = function () {
menuDrawerMobile.style.top = Math.max(header.offsetHeight - this.scrollY) + 'px';
window.removeEventListener('resize', afterOrientationChange);
};
window.addEventListener('resize', afterOrientationChange);
return;
});
@import '../../../assets/scss/variables';
@import '../../../assets/scss/utilities';
// Settings for the default version of the IOWA bar.
.iowa-bar {
position: relative;
z-index: 2;
display: block;
min-height: auto;
background: $secondary;
@include breakpoint(md) {
//min-height: 80px;
background: $primary;
}
.logo--tab {
margin-right: 20px;
@include breakpoint(page-container) {
margin-left: -12px;
// More padding on top in this variation.
padding: 27px 20px 20px;
}
}
.site-name {
width: 100%;
padding: $gutter;
background: $primary;
@include breakpoint(md) {
width: auto;
background: transparent;
padding: 0;
}
@include breakpoint(page-container) {
margin: 5px 0 0 0;
}
}
&__container {
max-width: $container-width;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 auto;
@include breakpoint(md) {
justify-content: flex-start;
display: flex;
}
@include breakpoint(md) {
margin-right: auto;
margin-left: auto;
}
.iowa-bar--narrow.horizontal &,
.iowa-bar--narrow.mega & {
@include breakpoint(page-container) {
position: relative;
}
}
}
// Styles for the narrow version of the IOWA bar.
&--full {
@include breakpoint(md) {
height: 80px;
background: $primary;
}
}
// Styles for the narrow version of the IOWA bar.
&--narrow {
@include breakpoint(md) {
min-height: 50px;
position: relative;
}
// Overrides the logo tab styles when using
// the narrow version of the IOWA bar.
.logo--tab {
margin-right: 10px;
@include breakpoint(md) {
height: 56px;
width: 119px;
padding: 15px;
}
@include breakpoint(page-container) {
margin-bottom: -6px;
}
// @todo Move this to search or search-toggle?
.search-is-open & {
visibility: none;
opacity: 0;
@include breakpoint(md) {
display: flex;
opacity: 1;
visibility: visible;
}
}
}
.logo-icon {
height: 20px;
@include breakpoint(md) {
height: 26px;
}
}
.parent-site-name {
@include breakpoint(page-container) {
padding: 6px 0 0 0;
}
}
.site-name {
font-size: 1rem;
margin: 0;
padding: $gutter;
background: $primary;
@include breakpoint(md) {
background: transparent;
font-size: 1rem;
padding: 0;
}
@include breakpoint(page-container) {
padding: 6px 0 0 0;
}
}
}
// Styles for container underneath
&__below {
z-index: 2;
border-bottom: 1px solid #e6e5e5;
background: #fff;
& .iowa-bar__container {
flex-wrap: wrap;
justify-content: space-between;
margin-right: 0;
margin-left: 0;
@include breakpoint(md) {
display: flex;
position: unset;
min-height: 90px;
justify-content: unset;
margin-right: auto;
padding-left: 1.25rem;
}
@include breakpoint(page-container) {
margin-left: auto;
padding-left: 0;
}
}
// Override .site-name styles when
// displayed underneath the iowa-bar.
.site-name {
margin: 0;
text-align: left;
font-size: 1.8rem;
@include breakpoint(md) {
width: 75%;
padding: 25px 20px 25px 0;
background: transparent;
font-size: 2rem;
}
@include breakpoint(page-container) {
font-size: 2.2rem;
}
// @todo Move to search or search-toggle?
.search-is-open & {
@include breakpoint(md) {
display: none;
}
}
}
}
}
// sticky header
.header-sticky .iowa-bar {
@include breakpoint(md) {
position: fixed;
z-index: 3;
top: 0;
left: 0;
width: 100%;
transition: transform 0.4s;
}
}
// sticky header for Iowa Bar Below
.header-sticky.scroll-up .iowa-bar__below,
.header-sticky.scroll-down .iowa-bar__below {
.search-overlay .uids-search {
@include breakpoint(md) {
margin-top: 3px;
border-bottom: none;
}
}
.iowa-bar__container {
@include breakpoint(md) {
min-height: 60px;
}
}
.site-name {
@include breakpoint(md) {
padding: 0;
transition: transform 0.4s, -webkit-transform 0.4s;
font-size: 1.6rem;
}
}
.search-button {
@include breakpoint(md) {
height: 60px;
padding: 7px 25px 7px 18px;
}
}
}
// fixed scroll bar
.header-sticky.scroll-down .iowa-bar {
@include breakpoint(md) {
transform: translate3d(0, -100%, 0);
}
.logo--tab {
@include breakpoint(md) {
margin-top: -17px;
}
}
}
.header-sticky.scroll-up .iowa-bar {
@include breakpoint(md) {
transform: none;
}
}
.header-sticky.scroll-up:not(.menu-open) .iowa-bar {
@include breakpoint(md) {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.35);
}
}