Improve navbar layout

Make navbar fixed for desktop and static for mobile.

public/css/header.styl

@@ -2,9 +2,11 @@
 -------------------- */
 .header-wrap
   width: 100% // this is for the sticky
-  padding: 0
+  padding: 54px 0 0 0 // add padding-top when navbar is fixed
+  @media screen and (max-width:768px)  // remove padding-top when navbar is static
+    padding: 0
   z-index: 100
-  background: #c0d0d0
+  background-color: darken($color-herobox, 8%)
   border-bottom: 1px solid rgba(0,0,0,0.2)
   // margin-top: -1px
   overflow-y: hidden
@@ -110,7 +112,8 @@
   display: table-cell
   vertical-align: middle
   min-width:175px
-  background-color: #c6d6d6
+  background-color: darken($color-herobox, 4%)
+  border-right: 1px solid darken($color-herobox, 12%)
 
   .meter, .bar
     box-shadow: none

public/css/menu.styl

@@ -1,5 +1,9 @@
 // Custom styles for the menu aka toolbar aka navbar
 .navbar
+  width:100%;
+  top:0
+  left:0
+  z-index:998
   color: #222
   background-color: #f5f5f5
   border: none;
@@ -65,33 +69,42 @@
     .toolbar-toggle
       .glyphicon
         color:#9d9d9d
+    .glyphicon-chevron-up
+      transition: all 0.32s linear
+    .glyphicon-chevron-up.active
+      transform: rotate(180deg)
 // Information bar: Bailey – notifs – currency – subscribe button
 .navbar-info
   float:right
   min-height:50px
-  padding-right:25px
+  // padding-right:25px
   li
     display:inline-block
-@media screen and (max-device-width:768px), screen and (max-width:768px)
+@media screen and (max-width:768px)
   .navbar-menu
     float:none
   .navbar-info
     width:100%
-// Button for toggling toolbar visibility
+.toolbar-sync
+  margin-left:4px
+  a
+    padding:8px !important
+  // Button for toggling toolbar visibility
 .collapse-toolbar
-  &.expanded
-    position:absolute
   &.collapsed
-    position:fixed
+    background-color:#c0d0d0
+  position: absolute
   right:0px
   top:0px
   width:45px
   height:50px
   padding-left:15px
-  padding-top:15px
+  padding-top:16px
+  background-color: #f5f5f5
   z-index:999
   .glyphicon
     color:#5d5d5d
+// Navigation submenu
 .toolbar-submenu
   background-color:#eee
   border-top: 1px solid rgba(0,0,0,0.2)
@@ -109,7 +122,9 @@
     .glyphicon
       margin-right:8px
       color:#9d9d9d
-.glyphicon-chevron-up
-  transition: all 0.32s linear
-.glyphicon-chevron-up.active
-  transform: rotate(180deg)
+@media screen and (min-width:768px)
+  .navbar, .collapse-toolbar
+    position:fixed
+@media screen and (max-width:768px)
+  .navbar-info.inactive
+    display:none;

views/shared/header/menu.jade

@@ -1,7 +1,7 @@
-a.collapse-toolbar.collapsed(popover=env.t('expandToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})')
-  span.glyphicon.glyphicon-chevron-down
-a.collapse-toolbar.expanded(popover=env.t('collapseToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='!user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":true})')
-  span.glyphicon.glyphicon-chevron-up
+//-a.collapse-toolbar.collapsed(popover=env.t('expandToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":false})')
+  //-span.glyphicon.glyphicon-chevron-down
+//-a.collapse-toolbar.expanded(popover=env.t('collapseToolbar'),popover-placement='left',popover-trigger='mouseenter',ng-if='!user.preferences.toolbarCollapsed',ng-click='set({"preferences.toolbarCollapsed":true})')
+  //-span.glyphicon.glyphicon-remove
 nav.navbar(ng-controller='AuthCtrl',ng-if='!user.preferences.toolbarCollapsed')
   ul.navbar-menu
     li
@@ -14,7 +14,7 @@ nav.navbar(ng-controller='AuthCtrl',ng-if='!user.preferences.toolbarCollapsed')
       a.toolbar-toggle(ng-click='isMenuCollapsed = !isMenuCollapsed')
         span.glyphicon.glyphicon-chevron-up(ng-class='{active: isMenuCollapsed}')
   .collapse.navbar-collapse(collapse="isNavbarCollapsed")
-    ul.nav.navbar-info
+    ul.nav.navbar-info(ng-class='{inactive: isMenuCollapsed}')
       li.toolbar-bailey-container(ng-if='user.flags.newStuff')
         .npc_bailey.npc_bailey_head(popover=env.t('psst'), popover-trigger='mouseenter', popover-placement='right', ng-click='openModal("newStuff")')
       // Invitations