Fixed Responsive Menu

assets/css/statbot.css

@@ -5,7 +5,7 @@ body {
 /* Stuff for the Side Menu */
 /* Add transition to containers so they can push in and out.  */
 #layout,
-#menu,
+#resp_menu,
 .menu-link {
   -webkit-transition: all 0.2s ease-out;
   -moz-transition: all 0.2s ease-out;
@@ -19,7 +19,7 @@ body {
   position: relative;
   padding-left: 0;
 }
-#layout.active #menu {
+#layout.active #resp_menu {
   left: 150px;
   width: 150px;
 }
@@ -63,12 +63,12 @@ body {
 }
 
 /*
-The `#menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
+The `#resp_menu` `<div>` is the parent `<div>` that contains the `.pure-menu` that
 appears on the left side of the page.
 */
 
-#menu {
-  margin-left: -150px; /* "#menu" width */
+#resp_menu {
+  margin-left: -150px; /* "#resp_menu" width */
   width: 150px;
   position: fixed;
   top: 0;
@@ -80,47 +80,47 @@ appears on the left side of the page.
   -webkit-overflow-scrolling: touch;
 }
 /* All anchors inside the menu should be styled like this.  */
-#menu a {
+#resp_menu a {
   color: #999;
   border: none;
   padding: 0.6em 0 0.6em 0.6em;
 }
 
-/* Remove all background/borders, since we are applying them to #menu.  */
-#menu .pure-menu,
-#menu .pure-menu ul {
+/* Remove all background/borders, since we are applying them to #resp_menu.  */
+#resp_menu .pure-menu,
+#resp_menu .pure-menu ul {
   border: none;
   background: transparent;
 }
 
 /* Add that light border to separate items into groups.  */
-#menu .pure-menu ul,
-#menu .pure-menu .menu-item-divided {
+#resp_menu .pure-menu ul,
+#resp_menu .pure-menu .menu-item-divided {
   border-top: 1px solid #333;
 }
 /* Change color of the anchor links on hover/focus.  */
-#menu .pure-menu li a:hover,
-#menu .pure-menu li a:focus {
+#resp_menu .pure-menu li a:hover,
+#resp_menu .pure-menu li a:focus {
   background: #333;
 }
 
 /* This styles the selected menu item `<li>`.  */
-#menu .pure-menu-selected {
+#resp_menu .pure-menu-selected {
   background: #0b4992;
 }
-#menu .pure-menu-heading {
+#resp_menu .pure-menu-heading {
   background: #1f8dd6;
 }
 
 /* This styles a link within a selected menu item `<li>`.  */
-#menu .pure-menu-selected a {
+#resp_menu .pure-menu-selected a {
   color: #fff;
 }
 
 /*
 This styles the menu heading.
 */
-#menu .pure-menu-heading {
+#resp_menu .pure-menu-heading {
   font-size: 110%;
   color: #fff;
   margin: 0;
@@ -141,7 +141,7 @@ small screens.
   position: fixed;
   display: block; /* show this only on small screens */
   top: 0;
-  left: 0; /* "#menu width" */
+  left: 0; /* "#resp_menu width" */
   background: #000;
   background: rgba(0,0,0,0.7);
   font-size: 10px; /* change this value to increase/decrease button size */
@@ -278,10 +278,10 @@ Hides the menu at `48em`, but modify this based on your app's needs.
   }
 
   #layout {
-    padding-left: 150px; /* left col width "#menu" */
+    padding-left: 150px; /* left col width "#resp_menu" */
     left: 0;
   }
-  #menu {
+  #resp_menu {
     left: 150px;
   }
 
@@ -294,11 +294,6 @@ Hides the menu at `48em`, but modify this based on your app's needs.
   #layout.active .menu-link {
     left: 150px;
   }
-
-
-  .levelup-user {
-    width: 48%;
-  }
 }
 
 @media (max-width: 48em) {
@@ -312,8 +307,4 @@ Hides the menu at `48em`, but modify this based on your app's needs.
     position: relative;
     left: 150px;
   }
-
-  .levelup-user {
-    width: 98%;
-  }
 }