Mobile friendly dropdown nav menu (#19)

* SASSBeautify

* Actually useful mobile dropdown menu

* Update _customizations.scss

Author: ericjames

_sass/_customizations.scss

@@ -5,112 +5,142 @@ $brand-brown-light: #E7DCD3;
 $slightly-bold: 500;
 
 a {
-  text-decoration: none;
-  color: $brand-teal;
-  &:visited {
-    color: $brand-teal;
-  }
-  &:hover {
-    color: $brand-teal-dark;
     text-decoration: none;
-  }
+    color: $brand-teal;
+
+    &:visited {
+        color: $brand-teal;
+    }
+
+    &:hover {
+        color: $brand-teal-dark;
+        text-decoration: none;
+    }
 }
 
 .teal {
-  color: $brand-teal;
+    color: $brand-teal;
 }
 
 .btn-teal {
-  background: white;
-  border: 2px solid $brand-teal;
+    background: white;
+    border: 2px solid $brand-teal;
 }
 
 .slightly-bold {
-  font-weight: $slightly-bold;
+    font-weight: $slightly-bold;
 }
 
 .jumbotron {
-  background-color: $brand-brown-light;
-  border-bottom: 1px solid $brand-teal;
-  h2 {
-    display: inline-block;
-    border-bottom: 1px solid black;
-  }
-  color: $brand-brown;
-  p {
-    font-size: 20px;
-  }
+    background-color: $brand-brown-light;
+    border-bottom: 1px solid $brand-teal;
+
+    h2 {
+        display: inline-block;
+        border-bottom: 1px solid black;
+    }
+
+    color: $brand-brown;
+
+    p {
+        font-size: 20px;
+    }
 }
 
 .panel-default {
-  border: 1px solid $brand-teal;
-  &>.panel-heading {
-    font-weight: $slightly-bold;
-    background-color: $brand-brown-light;
-    border-bottom: 1px solid $brand-teal;
-  }
+    border: 1px solid $brand-teal;
+
+    & > .panel-heading {
+        font-weight: $slightly-bold;
+        background-color: $brand-brown-light;
+        border-bottom: 1px solid $brand-teal;
+    }
 }
 
 .navbar {
-  margin-bottom: 0px;
-  border-bottom: 3px solid $brand-teal;
-  height: 70px;
-  a {
-    font-size: 1.3em;
-    font-weight: $slightly-bold;
-    letter-spacing: 2px;
-    text-transform: uppercase;
-  }
-  .titleUpper {
-    font-size: 20px;
-  }
-
-  .titleLower {
-    text-align: right;
-    font-size: 12px;
-    letter-spacing: 1px;
-  }
-
-  .navbar-nav {
-    margin-top: 6px;
-    font-size: 18px;
-  }
-
+    margin-bottom: 0px;
+    border-bottom: 3px solid $brand-teal;
+    height: 70px;
+
+    a {
+        font-size: 1.3em;
+        font-weight: $slightly-bold;
+        letter-spacing: 2px;
+        text-transform: uppercase;
+    }
+
+    .titleUpper {
+        font-size: 20px;
+    }
+
+    .titleLower {
+        text-align: right;
+        font-size: 12px;
+        letter-spacing: 1px;
+    }
+
+    .navbar-nav {
+        margin-top: 6px;
+        font-size: 18px;
+    }
 }
 
 .instagram-image-container {
-  display: flex;
-  justify-content: space-between;
-  flex-wrap: wrap;
+    display: flex;
+    justify-content: space-between;
+    flex-wrap: wrap;
 }
 
 .instagram-image-link {
-  flex-shrink: 0;
-  text-align: center;
+    flex-shrink: 0;
+    text-align: center;
 }
 
 .instagram-image {
-  height: 150px;
+    height: 150px;
 }
 
 .tc {
-  text-align: center;
+    text-align: center;
 }
 
 .sponsor {
-  display: inline-block;
-  margin: 15px;
-  height: 55px;
-  width: auto;
-  img {
+    display: inline-block;
+    margin: 15px;
     height: 55px;
     width: auto;
-  }
+
+    img {
+        height: 55px;
+        width: auto;
+    }
 }
 
 .flex {
-  display: flex;
+    display: flex;
 }
+
 .flex-auto {
-  flex: 1 1 auto;
+    flex: 1 1 auto;
 }
+
+@media (max-width: 767px) {
+    .navbar {
+        .navbar-collapse {
+            position: relative;
+            z-index: 10;
+            border: none;
+            padding-right: 20px; // Line up buttons to hamburger
+            background: rgb(255, 255, 255);
+            background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 100%);
+        }
+
+        .navbar-nav {
+            font-size: 28px;
+        }
+
+        .navbar-toggle {
+            padding: 15px;
+        }
+    }
+}