copenlight/styles/_header.scss

/***** Header *****/
$header-height: 71px;

.header {
  @include max-width-container;
  position: relative;
  align-items: center;
  display: flex;
  height: $header-height;
  justify-content: space-between;
}

.logo img {
  max-height: 37px;
  vertical-align: middle;
}

.logo span {
  margin: 0 10px;
  color: $brand_color;
}

.logo a {
  display: inline-block;
}

.logo a:hover, .logo a:focus, .logo a:active {
  text-decoration: none;
}

.user-nav {
  @include tablet { position: relative; }
  display: inline-block;
  position: absolute;
  white-space: nowrap;

  &[aria-expanded="true"] {
    background-color: #fff;
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .15), 0 4px 10px 0 rgba(0, 0, 0, .1);
    border: solid 1px #ddd;
    right: 0;
    left: 0;
    top: $header-height;
    z-index: 1;

    > a {
      display: block;
      margin: 20px;
    }

    > .user-nav-list {
      li {
        display: block;
      }

      a {
        display: block;
        margin: 20px;
      }
    }
  }
}

.user-nav-list {
  display: block;
  list-style: none;

  > li {
    display: inline-block;
  }
}

.nav-wrapper-desktop {
  @include mobile { display: none; }
  @include tablet { display: none; }
  @include desktop { display: inline-block; }

  a {
    @include tablet {
      display: inline-block;
    }

    border: 0;
    color: $link_color;
    display: none;
    font-size: 14px;
    padding: 0 20px 0 0;
    width: auto;

    [dir="rtl"] & { padding: 0 0 0 20px;}

    &:hover,
    &:focus,
    &:active {
      background-color: transparent;
      color: $link_color;
      text-decoration: underline;
    }
  }
}

.nav-wrapper-mobile {
  @include desktop { display: none; }

  .menu-button-mobile {
    background: none;
    border: 0;
    width: auto;
    min-width: 71px;
    cursor: pointer;

    .icon-menu {
      padding: 7px;
      vertical-align: middle;
      width: 30px;
      height: 30px;
      border-radius: 50%;
    }

    &[aria-expanded="true"] {
      .icon-menu {
        background: #f3f3f3;
      }
    }
  }

  .menu-list-mobile {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 10px 10px 0 rgba(0, 0, 0, .15);
    border-top: solid 1px #ddd;
    border-bottom: solid 1px #ddd;
    right: 0;
    left: 0;
    top: $header-height;
    z-index: 2;

    &[aria-expanded="false"] {
      display: none;
    }

    &[aria-expanded="true"] {
      display: block;
    }
  }

  .menu-list-mobile-items {
    .item {
      margin: 4px 0;
    }

    li:empty:not(.nav-divider){
      display: none;
    }

    .nav-divider {
      border-bottom: 0.1px solid #ddd;
      padding: 0;

      &:last-child {
        display: none;
      }
    }

    button {
      background: none;
      border: none;
      padding: 8px 24px;

      width: 100%;
      height: 100%;
      color: $text_color;
      cursor: pointer;
      text-align: start;

      &:active, &:focus, &:hover {
        background-color: #f3f3f3;
        text-decoration: underline;
      }
    }

    a {
      display: block;
      padding: 8px 24px;
      width: 100%;
      height: 100%;
      color: $text_color;

      &:active, &:focus, &:hover {
        background-color: #f3f3f3;
      }
    }

    .my-profile {
      display: flex;
      line-height: 1.5;

      .my-profile-tooltip {
        font-size: 12px;
        color: #68737D;
      }
    }

    .menu-profile-avatar {
      height: 20px;
      width: 20px;
      border-radius: 50%;
      display: inline-block;
      margin-right: 8px;
      margin-top: 1px;

      [dir="rtl"] & {
        margin-right: 0;
        margin-left: 8px;
      }
    }
  }
}

.skip-navigation {
  align-items: center;
  background-color: black;
  color: white;
  display: flex;
  font-size: 14px;
  justify-content: center;
  left: -999px;
  margin: 20px;
  padding: 20px;
  overflow: hidden;
  position: absolute;
  top: auto;
  z-index: -999;


  [dir="rtl"] & {
    left: initial;
    right: -999px;
  }

  &:focus,
  &:active {
    left: auto;
    overflow: auto;
    text-align: center;
    text-decoration: none;
    top: auto;
    z-index: 999;


  [dir="rtl"] & {
    left: initial;
    right: auto;
  }
  }
}

// Disable the skip-navigation link when modals are open
#zd-modal-container ~ .skip-navigation {
  display: none;
}