bt5, main layout, responsive header

src/Bundle/ChillMainBundle/Resources/public/modules/bootstrap/_custom.scss

@@ -97,7 +97,7 @@ div.chill_address {
    }
 }
 
-/// base layout
+/// base layout positions
 
 body {
    display: flex;
@@ -108,55 +108,88 @@ body {
    }
 }
 
-nav.navbar {
-   padding: 0;
-   .navbar-brand img {
-      height: 50px;
-      margin: 8px 0;
+header {
+   a {
+      text-decoration: none;
    }
-   .navbar-collapse,
-   .navbar-toggler {
-      float: right;
-   }
-   ul.navbar-nav {
-      display: flex;
-      align-items: stretch;
-      li.nav-item {
+   nav.navbar {
+      padding: 0;
+      a.navbar-brand img {
+         height: 50px;
+         margin: 8px 0;
+      }
+      div.navbar-collapse {
+         float: right;
+      }
+      @media (max-width: 768px) {
+         & {
+            position: relative; 
+         }
+         button.navbar-toggler {
+            float: right;
+         }
+         div.navbar-collapse {
+            float: none;
+            position: absolute;
+            top: 4em; 
+            right: 0;
+            z-index: 2;
+            padding: 1em;
+         }
+      }
+      ul.navbar-nav {
          display: flex;
-         &.btn {
-            padding-top: 0;
-            padding-bottom: 0;
-         }
-         & > a {
-            align-self: center;
-         }
-         form.form-inline {
-            align-self: center;
+         align-items: stretch;
+         li.nav-item {
             display: flex;
-            input.form-control {
+            &.btn {
+               padding-top: 0;
+               padding-bottom: 0;
+            }
+            & > a {
                align-self: center;
-               height: 32px;
+            }
+            form.form-inline {
+               align-self: center;
+               display: flex;
+               input.form-control {
+                  align-self: center;
+                  height: 32px;
+               }
             }
          }
       }
-   }
-   .dropdown-menu {
-      .dropdown-item {
-         width: 120%;
-         i {
-            float: right;
+      div.dropdown-menu {
+         margin: 0;
+         padding: 0;
+         border-radius: 0;
+         a.dropdown-item {
+            width: 120%;
+            border-bottom: 1px solid $gray-200;
+            font-size: smaller;
+            i { 
+               float: right; }
+            &:hover { 
+               color: $gray-500 !important; }
          }
       }
    }
 }
-div.header-name, 
-div.header-details {
-   div.row > div:first-child {
-      margin-left: 1.5em;
+
+div.banner {
+   div.header-name, 
+   div.header-details {
+      div.row > div:first-child {
+         @media (min-width: 576px) { 
+            margin-left: 1.5em;
+         }
+      }
+   }
+   a {
+      text-decoration: none;
    }
 }
 
-
 footer.footer {
    background: $dark;
    padding-top: 10px;