astuto/app/javascript/stylesheets/general/_header.scss

.navbar {
  position: sticky;
  z-index: 1;
  top: 0px;

  background-color: white;

  border-bottom-width: 1px;
  border-bottom-style: solid;
  border-bottom-color: rgba(0, 0, 0, 0.25);

  box-shadow: 0 1px 4px rgba(0,0,0,0.15), 0 1px 8px rgba(0,0,0,0.15);

  margin-bottom: 1em;

  .navbar-brand {
    font-size: 18pt;
    font-weight: 700;

    .logo {
      @extend
        .d-inline-block,
        .align-top,
        .mr-2;

      width: 36px;
    }
  }

  .boardsNav {
    .nav-item {
      @extend
        .badge,
        .text-uppercase;
      
      font-size: 14px;
      text-align: left;
    }

    .nav-item.active {
      @extend .badgeLight;
    }
  }

  .fullname {
    vertical-align: middle;

    color: $astuto-black;
  }

  .dropdown-toggle::after {
    vertical-align: middle;
  }

  .navbar-toggler:focus {
    outline: none;
  }

  .navbar-toggler[aria-expanded="true"] {
    background-color: $astuto-grey;
  }

  .dropdown-item:active {
    background-color: $astuto-black;
  }
}