/ embark-ui / src / scss / _header.scss
_header.scss
  1  .app-header {
  2    position: relative;
  3    flex-direction: row;
  4    height: $navbar-height;
  5    padding: 0;
  6    margin: 0;
  7    background-color: $navbar-bg;
  8    @include borders($navbar-border);
  9  
 10    .navbar-brand {
 11      display: inline-flex;
 12      align-items: center;
 13      justify-content: center;
 14      width: $navbar-brand-width;
 15      height: $navbar-height;
 16      padding: 0;
 17      margin-right: 0;
 18      background-color: $navbar-brand-bg;
 19      @include borders($navbar-brand-border);
 20  
 21      .navbar-brand-minimized {
 22        display: none;
 23      }
 24    }
 25  
 26    .navbar-toggler {
 27      min-width: 50px;
 28      padding: $navbar-toggler-padding-y 0;
 29  
 30      &:hover .navbar-toggler-icon {
 31        background-image: $navbar-toggler-icon-hover;
 32      }
 33    }
 34  
 35    .navbar-toggler-icon {
 36      height: 23px;
 37      background-image: $navbar-toggler-icon;
 38    }
 39  
 40    .navbar-nav {
 41      flex-direction: row;
 42      align-items: center;
 43    }
 44  
 45    .nav-item {
 46      position: relative;
 47      min-width: 50px;
 48      margin: 0;
 49      text-align: center;
 50  
 51      button {
 52        margin: 0 auto;
 53      }
 54  
 55      .nav-link {
 56        padding-top: 0;
 57        padding-bottom: 0;
 58        background: 0;
 59        border: 0;
 60  
 61        .badge {
 62          position: absolute;
 63          top: 50%;
 64          left: 50%;
 65          margin-top: -16px;
 66          margin-left: 0;
 67        }
 68  
 69        > .img-avatar {
 70          height: $navbar-height - 20px;
 71          margin: 0 10px;
 72        }
 73      }
 74    }
 75  
 76    .dropdown-menu {
 77      padding-bottom: 0;
 78      line-height: $line-height-base;
 79    }
 80  
 81    .dropdown-item {
 82      min-width: 180px;
 83    }
 84  }
 85  
 86  .navbar-nav {
 87    .nav-link {
 88      color: $navbar-color;
 89  
 90      @include hover-focus {
 91        color: $navbar-hover-color;
 92      }
 93    }
 94  
 95    .open > .nav-link,
 96    .active > .nav-link,
 97    .nav-link.open,
 98    .nav-link.active {
 99      @include plain-hover-focus {
100        color: $navbar-active-color;
101      }
102    }
103  }
104  
105  .navbar-divider {
106    background-color: rgba(0, 0, 0, .075);
107  }
108  
109  @include media-breakpoint-up(lg) {
110    .brand-minimized {
111      .app-header {
112        .navbar-brand {
113          width: $navbar-brand-minimized-width;
114          background-color: $navbar-brand-minimized-bg;
115          @include borders($navbar-brand-minimized-border);
116  
117          .navbar-brand-full {
118            display: none;
119          }
120  
121          .navbar-brand-minimized {
122            display: block;
123          }
124        }
125      }
126    }
127  }