diaspora/app/assets/stylesheets/header.scss

.not-connected-menu {
  .navbar-left {
    float: left;
  }

  .navbar-right,
  .navbar-right li {
    float: right;
  }
}

.navbar.navbar-fixed-top {
  border-bottom: none;
  box-shadow: 1px 0 2px $black;
  a:focus { outline: 0 none; }

  .in {
    overflow-y: visible; // Avoid search result dropdown to be hidden
  }

  .navbar-brand {
    font-weight: bold;
    font-size: $font-size-h3;
    margin-left: -15px;
  }

  .header-title {
    margin-top: -7px;

    img {
      height: 32px;
      opacity: .7;
    }

    img:hover {
      opacity: 1;
    }
  }

  .navbar-header > ul,
  .navbar-header > ul li {
    float: left;
  }

  [class^="entypo-"],
  [class*="entypo-"] {
    color: inherit;
    font-size: $font-size-h3;
    vertical-align: middle;
  }

  .nav-badge {
    padding: 16px 12px;

    .badge {
      position: absolute;
      right: 10px;
      top: 10px;
    }
  }

  .navbar-nav:not(.nav-badges) > li > a { font-weight: bold; }
  .nav-badges {
    margin: 0;

    li { height: $navbar-height; }
    .dropdown-open {
      background-color: $dropdown-bg;
      & > a { color: $dropdown-link-color; }
      .dropdown-menu { display: block; }
    }
    .dropdown-menu {
      border-top: none;
      margin-left: -1px;
      padding: 0px;
      width: 400px;
      .avatar {
        width: 35px;
        height: 35px;
      }
      .header {
        padding: 10px;
        border-bottom: 1px solid $border-grey;
        h4 { margin: 5px 0; }
      }
      .notifications {
        position: relative;
        max-height: 350px;
      }
      .stream-element.media {
        padding: 5px;
        .tooltip { position: fixed; }
        .unread-toggle {
          margin-right: 10px;
          opacity: 1;
        }
        & > .pull-right > .aspect_membership_dropdown { display: none; }
      }
      .ajax-loader {
        border-bottom: 1px solid $border-grey;
        padding: 10px;
        .spinner {
          height: 30px;
          width: 30px;
        }
      }
      .view_all {
        background-color: $brand-primary;
        border-top: 3px solid $dropdown-bg;
        text-align: center;
        a {
          color: $white;
          display: block;
          font-weight: bold;
          padding: 5px;
          &:hover { text-decoration: none; }
        }
      }
    }
  }

  .user-menu-dropdown {
    padding: 0;
  }

  .user-avatar {
    height: $navbar-height;
    margin-bottom: -$navbar-padding-vertical;
    margin-right: 10px;
    margin-top: -$navbar-padding-vertical;
    padding: ($navbar-height - 30px) / 2 0;

    .avatar {
      height: 30px;
      width: 30px;
    }
  }

  @media (max-width: $grid-float-breakpoint-max) {

    .navbar-nav.hidden-xs {
      margin: 0;
      margin-top: 6px;
    }

    .nav-badge {
      color: $navbar-inverse-link-color;
      &:hover { color: $navbar-inverse-link-hover-color; }
      &:hover,
      &:focus {
        background-color: transparent;
      }
    }

    .form-group,
    .twitter-typeahead {
      margin-bottom: 0;

      &,
      input { width: 100%; }
    }

    .nav-badges .dropdown-menu {
      width: 300px;
    }

    .user-menu-dropdown {
      background-color: transparent;
      border: 0;
      box-shadow: none;
      display: block;
      margin-top: -8px; // To compensate parent ul margin
      padding: 0;
      position: static;
      width: 100%;

      a {
        color: #9d9d9d;
        font-weight: bold;
        padding: 10px 15px;

        &:hover {
          background-color: transparent;
          color: #fff;
        }
      }
    }
  }

  @media (min-width: $grid-float-breakpoint) {

    [type="search"] {
      @include transition(width);
      margin-top: 2px;
      width: 200px;

      &:not(.active) {
        background-color: $navbar-inverse-bg;
        border-color: $gray-light;
        width: 150px;
      }
    }

    .user-menu {
      &.open .dropdown-toggle { background-color: darken($navbar-inverse-bg, 7%); }
      .dropdown-toggle {
        margin: 0 1px;
        min-width: 160px;
      }
    }

    .user-menu-dropdown {
      background-color: darken($navbar-inverse-bg, 7%);
      border-top: 0;
      width: 100%;

      a {
        color: $gray-light;
        padding-left: 55px;

        &:hover {
          background-color: $brand-primary;
          color: $gray-lighter;
        }
      }

      li:last-child a {
        padding-bottom: 6px;
      }
    }
  }
}