Top Menu

Todo

Roadmap

Menu Top: Menu Top Links

Component Preview
<nav role="navigation" aria-label="Top Links" class="menu--top nav">
    <ul class="menu">
        <li><a href="/top-link">Apply</a></li>

        <li><a href="/top-link">Visit</a></li>

        <li><a href="/top-link">Request Info</a></li>

    </ul>
</nav>
  • Content:
    .menu--top .menu li {
      display: flex; }
      .menu--top .menu li:nth-child(3) {
        display: none !important; }
        @media (min-width: 980px) {
          .menu--top .menu li:nth-child(3) {
            display: flex !important; } }
      .menu--top .menu li a {
        padding: 1.05rem;
        color: #fff; }
        @media (min-width: 980px) {
          .menu--top .menu li a {
            color: var(--brand-secondary); } }
        .menu--top .menu li a:hover, .menu--top .menu li a:focus {
          text-decoration: underline; }
        .iowa-bar--full .menu--top .menu li a {
          font-size: .9rem;
          padding-right: 0; }
          @media (min-width: 980px) {
            .iowa-bar--full .menu--top .menu li a {
              font-size: 1.2rem;
              padding-right: 1.05rem; } }
        .iowa-bar--narrow .menu--top .menu li a {
          padding: 0.8rem 1.05rem; }
    
    .iowa-bar--narrow .menu--top {
      position: absolute !important;
      height: 1px;
      width: 1px;
      overflow: hidden;
      clip: rect(1px, 1px, 1px, 1px); }
      @media (min-width: 980px) {
        .iowa-bar--narrow .menu--top {
          position: static !important;
          clip: auto;
          height: auto;
          width: auto;
          overflow: auto;
          overflow: unset;
          position: absolute !important; } }
    
    .menu--top.nav {
      margin-top: 7px;
      position: absolute;
      z-index: 2;
      right: 96px;
      top: 0;
      display: block; }
      @media (min-width: 768px) {
        .menu--top.nav {
          margin-top: 9px; } }
      @media (min-width: 980px) {
        .menu--top.nav {
          right: 356px;
          margin-top: 11px; } }
    
    .iowa-bar--narrow .nav.menu--top {
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0px;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0; }
    
    .nav.menu--top .menu li a {
      font-weight: 300; }
    
  • URL: /components/raw/top/top.css
  • Filesystem Path: src/components/menus/top/top.css
  • Size: 1.7 KB
  • Content:
    @import '../../../assets/scss/variables';
    @import '../../../assets/scss/utilities';
    
    .menu--top {
      .menu {
        li {
          display: flex;
          &:nth-child(3) {
            display: none !important;
    
            @include breakpoint(md) {
              display: flex !important;
            }
          }
    
          a {
            padding: $md;
            color: #fff;
            @include breakpoint(md) {
              color: $secondary;
            }
             &:hover,
             &:focus {
               text-decoration: underline;
             }
            .iowa-bar--full & {
              font-size: .9rem;
              padding-right: 0;
              @include breakpoint(md) {
              font-size: 1.2rem;
              padding-right: $md;
              }
            }
    
            .iowa-bar--narrow & {
              padding: .8rem $md;
            }
    
            &:hover {}
          }
        }
      }
    }
    
    .iowa-bar--narrow {
      .menu--top {
          @include element-invisible;
            @include breakpoint(md) {
              @include element-invisible-off;
              overflow: unset;
              position: absolute !important;
        }
      }
    }
    
    .menu--top.nav {
      margin-top: 7px;
      position: absolute;
      z-index: 2;
      right: 96px;
      top: 0;
      display: block;
    
      @include breakpoint(sm) {
        margin-top: 9px;
      }
    
      @include breakpoint(md) {
        right: 356px;
        margin-top: 11px;
      }
    }
    
    .iowa-bar--narrow .nav.menu--top {
      position: absolute;
      top: 0;
      right: 20px;
      bottom: 0px;
      width: auto;
      height: auto;
      padding: 0;
      margin: 0;
    }
    
    .nav.menu--top .menu li a {
      font-weight: $font-weight-light;
    }
    
  • URL: /components/raw/top/top.scss
  • Filesystem Path: src/components/menus/top/top.scss
  • Size: 1.5 KB