There are no notes for this item.

IOWA Bar: Narrow

Component Preview
<header class="iowa-bar iowa-bar--narrow" 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>
          <h1 class="site-name">
              Site Name
          </h1>
      </div>
  </header>
  • Content:
    .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); } }
    
  • URL: /components/raw/iowa-bar/iowa-bar.css
  • Filesystem Path: src/components/branding/iowa-bar/iowa-bar.css
  • Size: 5.4 KB
  • Content:
    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;
    });
    
  • URL: /components/raw/iowa-bar/iowa-bar.js
  • Filesystem Path: src/components/branding/iowa-bar/iowa-bar.js
  • Size: 1.7 KB
  • Content:
    @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);
      }
    }
    
  • URL: /components/raw/iowa-bar/iowa-bar.scss
  • Filesystem Path: src/components/branding/iowa-bar/iowa-bar.scss
  • Size: 5.1 KB