Misago/frontend/style/misago/navbar.less

//
// Misago Navbar
// --------------------------------------------------


// Remove bottom margin from navbar
.navbar {
  margin-bottom: 0px;
}

// Desktop navbar
.navbar .navbar-full {
  // Brand
  .navbar-brand {
    &>* {
      display: inline-block;
    }

    img {
      height: 16px;
    }
  }

  // Force search widths
  .navbar-search {
    width: 300px;

    @media (max-width: @screen-sm-max) {
      width: 150px;
    }

    .form-group {
      display: block;
    }

    .form-control {
      width: 100%;
    }
  }

  // Pull Guest and User menus to right
  .nav-guest, .nav-user {
    float: right;

    .navbar-notification {
      padding-top: (@navbar-height - 28px) / 2;
      padding-bottom: (@navbar-height - 28px) / 2;
      position: relative;

      .material-icon {
        width: 28px;
        height: 28px;

        font-size: 28px;
        line-height: 28px;
      }

      .badge {
        background-color: @brand-danger;
        position: absolute;

        top: 6px;
        right: 6px;

        font-size: 9px;
      }
    }

    .navbar-btn {
      margin-left: @navbar-padding-horizontal;
    }
  }

  // User avatar size
  .nav-user .dropdown-toggle {
    padding: (@navbar-height - @navbar-avatar-size) / 2;

    img {
      width: @navbar-avatar-size;
      height: @navbar-avatar-size;
    }
  }
}


// Compact (mobile) navbar
.navbar ul.navbar-compact-nav {
  border-collapse:collapse;
  display: table;
  margin: 0px;
  table-layout: fixed;
  width: 100%;

  &>li {
    display: table-cell;
    width: 100%;
  }

  &>li>a, &>li>button {
    background: none;
    border: none;
    display: block;
    padding-top: 13px;
    padding-bottom: 13px;

    width: 100%;

    color: @navbar-default-link-color;
    text-align: center;

    &:hover, &:focus {
      color: @navbar-default-link-hover-color;
      background-color: @navbar-default-link-hover-bg;
    }

    &>img {
      width: @navbar-compact-item-size;
      height: @navbar-compact-item-size;
    }
  }

  &>li>button {
    display: inline-block;
  }

  &>li>a>.material-icon {
    font-size: @navbar-compact-item-size;
    line-height: @navbar-compact-item-size;
  }
}

// Make navbar's height match compact nav
@media (max-width: @grid-float-breakpoint) {
  .navbar.navbar-misago {
    min-height: auto;
  }
}


// Hide compact navbar above breakpoint
.navbar-misago .navbar-desktop-nav {
  display: none;
}

@media (min-width: @grid-float-breakpoint) {
  .navbar-misago ul.navbar-compact-nav {
    display: none;
  }

  .navbar-misago .navbar-desktop-nav {
    display: block;
  }
}