_navbar.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 }