There are no notes for this item.

IOWA Bar: Narrow
Ready

Output (HTML)
Assets
Info


        
        <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>

File:

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

Handle: @iowa-bar--narrow
Variants (5): Just Logo , Full , Narrow , Site name below , Has parent site
Preview:
- With layout
- Component only
Filesystem Path: src/components/branding/iowa-bar/iowa-bar.twig
References (3): @logo, @parent-site-name, @site-name
Referenced by (1): @viewbook

IOWA Bar: Narrow Ready

IOWA Bar: Narrow
Ready