- Fix logo to display "Quay.io" in the proper font

- Fix the CSS to properly show the menu on smaller screens and to scale down the logo as necessary
- Fix the CSS to have the menu icon be properly sized

static/css/quay.css

@@ -1325,6 +1325,7 @@ i.toggle-icon:hover {
   right: 20px;
   top: 20px;
   color: white;
+  z-index: 100;
 }
 
 .landing .header-bar .user-tools a {
@@ -1348,11 +1349,56 @@ i.toggle-icon:hover {
   font-weight: normal;
 }
 
-@media (max-height: 768px) {
-  .landing {
+@media (max-width: 1032px) {
+   .landing .logo {
+      width: 250px;
    }
 }
 
+@media (max-width: 971px) {
+  .landing .navbar-collapse {
+      background: rgba(0, 0, 0, 0.8);
+      border-radius: 2px;
+   }
+
+    .navbar-header {
+        float: none;
+    }
+
+    .navbar-toggle {
+        display: block;
+        color: white;
+        font-size: 48px;
+        line-height: 28px;
+        padding: 4px;
+    }
+
+    .navbar-collapse {
+        border-top: 1px solid transparent;
+        box-shadow: inset 0 1px 0 rgba(255,255,255,0.1);
+    }
+
+    .navbar-collapse.collapse {
+        display: none!important;
+    }
+
+    .navbar-nav {
+        float: none!important;
+        margin: 7.5px -15px;
+    }
+
+    .navbar-nav>li {
+        float: none;
+    }
+
+    .navbar-nav>li>a {
+        padding-top: 10px;
+        padding-bottom: 10px;
+    }
+
+    .navbar-collapse.collapse.in { display: block!important; }
+}
+
 .landing .messages b {
   color: #59B2FF;
 }