Navigation

Header(oben am Bildschirmrand)

Die Metanavigation erstreckt sich über die gesamte Fensterbreite und verschwindet beim Scrollen.
Der Navigationszettel hingegen bleibt am oberen Fensterrand stehen und ist jederzeit sichtbar.
Bei Mobiles ( < 768 pixel ) verschwindet die Metanavigation und der Navigationszettel tritt an seinen Platz.
Der Inhalt der Metanavigation ist dann im Menu aufgelistet. 

        <header class="pageHeader">

  <div class="metaline d-none d-md-flex">
    <div class="container-md">
      <ul class="nav secondNav">
        <li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
        <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
        <li class="nav-item last"><a class="nav-link" href="#">FAQ</a></li>
      </ul>
      <ul class="nav language">
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle language-title"
             href="#"
             id="navbarDropdown"
             role="button"
             data-toggle="dropdown"
             aria-haspopup="true"
             aria-expanded="false">
            <i class="icn-internet"></i>
            Global English
          </a>
          <div class="dropdown-menu language-menu" aria-labelledby="navbarDropdown">
            <ul class="nav navlist">
              <li><a class="nav-link dropdown-item" href="#">Schweiz Deutsch</a></li>
              <li><a class="nav-link dropdown-item" href="#">Suisse Francais</a></li>
              <li><a class="nav-link dropdown-item" href="#">Svizerra Italiano</a></li>
              <li><a class="nav-link dropdown-item active" href="#">Global English</a></li>
            </ul>
          </div>
        </li>
      </ul>
    </div>
  </div>

  <div class="mainline container-md" style="top: -2px;">
    <div class="stickyline">
      <div class="zettelIcons container-sm">

        <div class="myclimate-projectlogo">
          <a href="#">
            <img class="myclimate-logo" src="/assets/images/myclimate_logo.svg">
          </a>
        </div>

        <ul class="nav zettelNav" id="zettelNav">
          <li class="nav-item">
            <a href="#" id="login-toggler" class="nav-link collapsed"
               data-toggle="collapse" data-target="#navbarLogin"
               aria-controls="#navbarLogin" aria-expanded="false"
               aria-label="Toggle login">
              <span title="login" class="icn-only icn-anmelden"></span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" id="search-toggler" class="nav-link collapsed"
               data-toggle="collapse" data-target="#navbarSearch"
               aria-controls="#navbarSearch" aria-expanded="false"
               aria-label="Toggle search">
              <span title="Suche" class="icn-only icn-lupe"></span>
            </a>
          </li>
          <li class="nav-item">
            <a href="#" class="nav-link collapsed" id="cart-icon-link">
              <span class="badge badge-pill badge-primary">4</span>
              <span title="Warenkorb" class="icn-only icn-warenkorb"></span>
            </a>
          </li>
          <li class="nav-item">
            <a id="navbar-toggler" href="#" class="nav-link"
               data-toggle="collapse" data-target="#navbarMenu"
               aria-controls="navbarMenu" aria-expanded="false"
               aria-label="Toggle navigation">
              <span title="Menü" class="icn-hamburger-navi"></span>
            </a>
          </li>
          <li class="nav-item close-menu">
            <button id="close_menu" type="button" href="#" class="close nav-link"
            aria-controls="close" aria-label="Close">
              <span aria-hidden="true"></span>
            </button>
          </li>
        </ul>

      </div>
      <div class="zettelBox container-sm" id="zettelBox">

        <div class="collapse" id="navbarMenu">
          <ul>
            <li>
              <a title="Information" class="nav-link" href="#">Information</a>
            </li>
            <ul>
              <li>
                <a title="About myclimate" href="#">About myclimate</a>
              </li>
              <li>
                <a title="Catch up on current myclimate topics" href="#">News &amp; Press</a>
              </li>
              <li>
                <a title="Partner" href="#">Partner</a>
              </li>
              <li>
                <a title="Climate protection projects" href="#">Climate protection projects</a>
              </li>
              <li>
                <a title="Education" href="#">Education</a>
              </li>
            </ul>
          </ul>
          <ul>
            <li>
              <a title="Get active" class="nav-link" href="#">Get active</a>
            </li>
            <ul>
              <li>
                <a title="Corporate clients" href="#">Corporate clients</a>
              </li>
            </ul>
          </ul>
          <ul>
            <li>
              <a title="Carbon offset" class="nav-link" href="#">Carbon offset</a>
            </li>
          </ul>

          <div id="meta-menu-xs" class="d-md-none">
            <div class="d-flex">
              <ul class="nav secondNav">
                <li class="nav-item"><a class="nav-link" href="#">Jobs</a></li>
                <li class="nav-item"><a class="nav-link" href="#">Contact</a></li>
                <li class="nav-item last"><a class="nav-link" href="#">FAQ</a></li>
              </ul>
            </div>
          </div>
          <div class="language dropdown d-md-none">
            <div class="d-flex justify-content-end language-title dropdown-toggle" data-toggle="dropdown">
                <i class="icn-internet"></i>
                Global English
            </div>
            <div class="dropdown-menu mobile-full-height">
              <div class="mobile--back-btn">
                  <i class="icn-pfeil-s-rechts"></i>
                  back
              </div>
              <ul class="nav navlist language-menu flex-column">
                <li><a class="nav-link dropdown-item" href="#">Schweiz Deutsch</a></li>
                <li><a class="nav-link dropdown-item" href="#">Suisse Francais</a></li>
                <li><a class="nav-link dropdown-item" href="#">Svizerra Italiano</a></li>
                <li><a class="nav-link dropdown-item active" href="#">Global English</a></li>
              </ul>
            </div>
          </div>

          <div class="collapse" id="navbarSearch">
            <form url="#" accept-charset="UTF-8" method="get">
              <div class="row">
                <div class="col-9">
                  <label for="search">Search</label>
                  <div class="form-group">
                    <input class="form-control" placeholder="Search / 12-34-567890"
                           type="text" name="search" id="search">
                  </div>
                </div>
                <div class="col-2">
                  <button title="Suche" class="btn searchbutton" type="submit">
                    <span class="icn-only icn-lupe"></span>
                  </button>
                </div>
              </div>
            </form>
          </div>

          <div class="collapse" id="navbarLogin">
            <form class="new_user" id="new_user" url="#"
                  accept-charset="UTF-8" method="post">
              <label class="login-title" for="user_email">Login</label>
              <div class="row">
                <div class="col-9">
                  <div class="form-group">
                    <input placeholder="Email" class="form-control login-form"
                           type="text" value="" name="user[email]" id="user_email">
                  </div>
                  <div class="form-group">
                    <input type="password" placeholder="Password"
                           class="form-control login-form" name="user[password]"
                           id="user_password">
                  </div>
                  <div class="form-group">
                    <label class="display-checkbox-as-block">
                      <input name="user[remember_me]" type="hidden" value="0">
                      <input class="login-form" type="checkbox" value="1"
                             name="user[remember_me]" id="user_remember_me">
                        Remember me
                    </label>
                  </div>
                </div>
                <div class="col-2">
                  <button name="button" type="submit" class="btn login-form">
                    <i class="icn-abmelden"></i>
                  </button>
                </div>
              </div>
            </form>
            <div class="signup-reset">
              <p>
                <a class="login-form" href="#">Sign up</a>
              </p>
              <p>
                <a class="login-form" href="#">Forgot your password?</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

      
        .metaline {
  position: relative;
  min-width: 100%;
  height: 50px;
  background-color: $white;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);
  text-align: right;

  .container-md {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: 50px;
    -ms-flex-direction: row;
    flex-direction: row;
    align-items: center;
    justify-content: flex-end;
    -webkit-box-align: center;
    -webkit-box-direction: normal;
    -webkit-box-orient: horizontal;
    -webkit-box-pack: end;
    -ms-flex-align: center;
    -ms-flex-pack: end;
  }

  .icn-only {
    display: inline-block;
    width: 50px;
    height: 35px;
    font-size: 0;
  }

  .nav-link {
    padding: 0.5rem 1rem;
    font-size: 0.8rem;
  }
}

.secondNav,
.language {
  .nav-link {
    display: block;
    font-weight: bold;

    &.active {
      color: $almost_black;
      background-color: white;
    }

    &:hover {
      color: $almost_black;
      background-color: white;
    }

    .icn-internet::before {
      color: $myc-dark-blue;
      font-size: 22px;
      font-weight: bold;
    }
  }
}

.language .language-title {
  padding: 0 10px;
  margin: 0;
  color: $myc-dark-blue;
  font-size: 0.8rem;
  font-weight: bold;
  display: flex;
  align-items: center;
  column-gap: 3px;
  cursor: pointer;

    &:hover::after,
    &:hover,
    &:hover i:before,
    .active,
    .active i:before {
      color: $almost_black;
    }
}

.language .language-title::after {
  z-index: 1;
  border: none;
  color: $secondary;
  content: '\e829';
  font-family: 'myclimate-icons';
  font-size: 1.1rem;
  font-weight: bold;
  line-height: 2.5rem;
  pointer-events: none;
  transform: rotate(90deg);
}

@media (min-width: 768px) {

  .dropdown.show .language-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    flex-direction: column-reverse;
  }

  .language-menu li {
    padding: 0.3rem 0.7rem;
    line-height: 1.9rem;

    a {
      line-height: 1.5rem;
    }
  }

  .dropdown-menu.language-menu {
    min-width: 100%;
    border: none;
    border-radius: unset;
    margin: 0;
    position: absolute;

    ul {
      box-shadow: 0px 2px 2px 0px rgba(0,0,0,0.1);
      padding: 10px 0;
    }
  }

  .language-menu .dropdown-item {
    color: $myc-dark-blue;
  }

  .language-menu .nav-link {
    padding: 0;
    font-size: 0.8rem;
    font-weight: bold;
    white-space: nowrap;
  }
}

@media (max-width: 767.98px) {
  .language{
    position: unset;
  }

  .language-title {
    .icn-internet::before {
      font-size: 1.2rem;
      font-weight: bold;
    }
  }

  .dropdown-menu{
    border: none;

    &.mobile-full-height {
      height: 100%;
      width: 100%;
    }

    .mobile--back-btn {
      display: flex;
      align-items: center;
      cursor: pointer;
      color: $myc-dark-blue;
      font-size: 0.9rem;
      font-style: normal;
      line-height: normal;
      padding: 0 15px 0 8px;

      i:before {
        font-size: 1.25rem;
        transform: rotate(180deg);
        font-weight: bold;
      }
    }
  }

  .language  {

    .dropdown.show {
      display: flex;
      flex-direction: column;
      position: absolute;
      top: 0;
      left: 0;
      width: 100vw;
      height: calc(100vh - 75px);
      background-color: $white;

      .dropdown-menu{
        position: unset;
        background: $white;
        width: 100%;
      }

      nav.secondNav{
        display: flex;
        justify-content: space-evenly;
        margin-bottom: 35px;
      }
    }

    .language-menu {
      border: none;
      margin-top: 38px;
      padding: 0;
    }

    .language-menu li {
      margin: 0 15px;
      padding: 15px 70px 15px 40px;
      display: flex;
      border-bottom: 1px solid $myc-dark-blue;
      position: relative;
    }

    .language-menu li:hover .nav-link{
      color: $black;
    }

    .language-menu li a{
      color: $myc-dark-blue;
      font-size: 1rem;
      font-style: normal;
      font-weight: 500;
    }

    .language-menu {
        .nav-link.active {
          color: $myc-dark-blue;
        }

        a.active:before{
        content: '\e839';
        font-family: 'myclimate-icons';
        font-weight: 600;
        position: absolute;
        left: 10px;
        top: 50%;
        transform: translateY(-60%);
      }
    }
  }
}

.secondNav .nav-link {
  padding: 0 0.5rem;
  margin-right: 1rem;
}

.mainline {
  position: fixed;
  z-index: 300;
  right: 0;
  left: 0;
  display: flex;
}

main.page-content {
  padding-top: 20px;
  margin-top: 75px;
}

.tab-content {
  padding: 20px 0 0;
}

.stickyline {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 15px 0 5px 0;
  background-color: white;
  -webkit-box-direction: normal;
  -webkit-box-orient: vertical;
  box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.1);

  &::before {
    position: absolute;
    top: -15px;
    width: 100%;
    height: 15px;
    background-color: white;
    content: '';
  }
}

@media (max-width: 767.98px) {
  .mainline {
    width: 100%;
    padding-right: 0;
    padding-left: 0;

    &.mobile-full-height {
      height: 100%;
    }
  }

  .stickyline {
    width: 100%;
  }
}

.zettelIcons {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-right: 0;

  .myclimate-logo {
    height: 45px;
    padding-right: 15px;
    padding-left: 5px;
  }

  #cart-icon-link .badge {
    position: absolute;
    top: 0;
    right: 9px;
    background-color: $primary;
    font-size: 0.6rem;
  }
}

.myclimate-projectlogo {
  padding: 0;
}

.zettelNav {
  &.nav {
    position: relative;
    flex-wrap: nowrap;
  }

  li {
    position: relative;
    align-items: center;
  }

  li > a {
    padding: 0 15px;
  }

  .close {
    width: 3.5rem;
    padding: 0 15px;
    color: $secondary;
    opacity: 1;
  }

  .close-menu {
    position: absolute;
    top: 0.3rem;
    right: 0;
    display: none;

    span::before {
      display: inline-block;
      width: 1em;
      content: '\e835';
      font-family: 'myclimate-icons';
      font-size: 2rem;
      font-style: normal;
      font-variant: normal;
      font-weight: normal;
      line-height: 1em;
      text-align: center;
      text-decoration: inherit;
      text-transform: none;
    }
  }

  &.open {
    .nav-item.close-menu {
      display: block;
    }

    .nav-item:not(.close-menu) {
      visibility: hidden;
    }
  }
}

@media (max-width: 767.98px) {
  .zettelNav li > a {
    padding: 0 10px;

    &#search-toggler {
      display: none;
    }
  }
}

@media (max-width: 400px) {
  .zettelNav {
    li > a {
      padding-right: 0;
      padding-left: 5px;
    }
  }
}

#navbarMenu {
  > ul {
    padding-left: 0;
  }
  ul {
    list-style-type: none;
  }

  a.nav-link {
    display: block;
    padding: 1rem 0 1.5rem 0;
    font-size: 1.5rem;
    font-weight: normal;
  }

  ul ul a {
    font-size: 1rem;
    font-weight: bold;
  }
}

.zettelBox {
  margin-top: 10px;
  background-color: white;

  #meta-menu-xs {

    .language-menu {
      margin-right: 3rem;

      @media (max-width: 767.98px) {
        margin-top: 0.3rem;
        margin-right: 1rem;
      }

      li a.nav-link {
        margin-right: 1rem;
        font-size: 1rem;
        font-weight: bold;
      }
    }
  }
}

@media (max-width: 767.98px) {
  .mainline.mobile-full-height .zettelBox {
    overflow-y: scroll;
  }

  #navbarMenu > ul:first-child {
    margin-top: 1.5rem;
  }

  #navbarMenu a.nav-link {
    padding: 1rem 0 0.5rem 0;
  }
}

@media (max-width: 567.98px) {
  #navbarMenu {
    a.nav-link {
      padding: 0.3rem 0 0.4rem 0;
      font-size: 1.2rem;
    }

    .language-menu a {
      font-size: 1rem;
      font-weight: bold;
    }
  }
}

#navbarLogin {
  label {
    color: $secondary;
    font-size: 0.8rem;

    &.login-title {
      font-weight: normal;
    }
  }

  form {
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;

    .input-group {
      display: flex;
      margin-right: 1rem;
    }

    button {
      padding: 0;
      border: none;
      margin-top: 60px;
      margin-left: -25px;
      background: none;
      color: $secondary;
    }
  }

  .signup-reset {
    margin-bottom: 2rem;
    margin-left: 1rem;
    font-size: 0.8rem;

    p {
      margin-bottom: 1rem;
    }
  }

  .zettel-logout-link,
  .zettel-profile-link {
    padding-left: 1.2rem;
  }
}

#navbarSearch {
  form {
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    margin-left: 1rem;

    .input-group {
      display: flex;
      margin-right: 1rem;
    }

    label {
      color: $secondary;
      font-size: 0.7rem;
    }

    input {
      padding-left: 0;
      border-bottom: 1px solid $black;
      margin-top: 0.5rem;
      font-size: 1rem;

      &:focus {
        border-bottom: 1px solid $secondary;
      }
    }

    button {
      padding: 0;
      margin-top: 50px;
      background: none;
      color: $secondary;
    }
  }
}

@media (min-width: 567.98px) and (max-width: 767.98px) {
  .dropdown-menu.show {
    transform: translateY(75px) !important;

    a.active:before {
    }
  }

  #navbarMenu a.nav-link {
    font-size: 1rem;
    font-weight: bold;
    padding: 0.3rem 0 0.4rem 0;
  }
}

      
        /*
 * The navigation consists of a metaline (full width) and the mainline (small
 * box). When scrolling, the metaline disappears and the mainline moves to the
 * very top of the browser window.
 *
 * +------------------------+
 * | metaline               |
 * +---+----------+---------+
 *     | mainline |
 *     +----------+
 */

$(document).ready(function() { 
  $("#close_menu").click(function(event) {
    $("#zettelBox .collapse").collapse('hide')
  })
  
  $("#zettelBox").on('show.bs.collapse', function () {
    $(".mainline").addClass("mobile-full-height");
    $("#zettelNav").addClass('open')
  })
  $("#zettelBox").on('hide.bs.collapse', function () {
    $(".mainline").removeClass("mobile-full-height");
    $("#zettelNav").removeClass('open')
  })
  
  function updateHeaderPositions() {
    const scrollPos = $(window).scrollTop()
    const metalineHeight = $(".metaline").outerHeight()
    let mainTop = metalineHeight - scrollPos
    if (mainTop < -2 || $(window).width() <= 767) mainTop = -2
    $(".mainline").css("top", mainTop+'px');
  }
  $(updateHeaderPositions)
  $(window).scroll(updateHeaderPositions)
  $(window).resize(updateHeaderPositions)
});

Nav Tabs

Nav Tabs werden einerseits mit statischen links realisiert.
Ein Beispiel hierfür ist die Navigationsleiste des Styleguides oben.
Eine Weitere Anwendung ist die Steuerung eines Carousels, wie das folgende Beispiel zeigt


Step Bar

Die Steps Bar wird für mehrseitige Formulare verwendet.
Das CSS ist weitgehend unabhängig von Bootstrap.

Berechnen
Kompensieren
Bezahlen
        <div class="steps-bar">
  <div class="step-item">
    <i class="step-item-icon"></i>
    <div class="step-item-text">Berechnen</div>
  </div>
  <div class="step-item active">
    <i class="step-item-icon"></i>
    <div class="step-item-text">Kompensieren</div>
  </div>
  <div class="step-item">
    <i class="step-item-icon"></i>
    <div class="step-item-text">Bezahlen</div>
  </div>
</div>
      
        .steps-bar {
  display: flex;
  justify-content: space-between;
  margin-top: auto;
  margin-bottom: 24px;

  .step-item {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: center;
    color: $info;
    font-size: 1rem;
    font-weight: bold;

    // connection line to left
    &::before {
      position: absolute;
      z-index: 2;
      top: 1em;
      left: calc(-50% + 1em);
      width: calc(100% - 2em);
      border-bottom: 2px solid $info;
      content: '';
    }

    .step-item-icon {
      position: relative;
      z-index: 5;
      display: flex;
      width: 2em;
      height: 2em;
      align-items: center;
      justify-content: center;
      border: 2px solid $info;
      margin-bottom: 6px;
      border-radius: 50%;

      &::after {
        position: absolute;
        z-index: 2;
        content: '\e839';
        font-family: 'myclimate-icons';
        font-size: 1.3em;
        font-style: normal;
      }
    }

    &:first-child::before {
      content: none;
    }

    &.active {
      color: $black;
      font-weight: bold;

      .step-item-icon {
        border-width: 3px;

        &::after {
          // width: 1.2rem;
          // height: 1.2rem;
          width: 2rem;
          height: 2rem;
          background-color: $info;
          border-radius: 50%;
          content: '';
        }
      }

      // uncompleted items:
      ~ .step-item {
        color: #CCCCCC;

        &::before {
          border-color: #CCCCCC;
        }

        .step-item-icon {
          border-color: #CCCCCC;

          &::after {
            content: none;
          }
        }
      }
    }
  }

  @include media-breakpoint-down(sm) {
    .step-item {
      font-size: 0.8rem;

      &.active .step-item-icon::after {
        // width: 1rem;
        // height: 1rem;
        width: 1.6rem;
        height: 1.6rem;
      }
    }
  }

  @include media-breakpoint-down(xs) {
    display: none;
  }
}