Merge pull request #341 from sharelatex/pr-fix-resp-menu

Fix hamburger menu

services/web/app/views/layout/navbar.pug

@@ -1,4 +1,4 @@
-nav.navbar.navbar-default
+nav.navbar.navbar-default.navbar-main
 	.container-fluid
 		.navbar-header
 			button.navbar-toggle(ng-init="navCollapsed = true", ng-click="navCollapsed = !navCollapsed", ng-class="{active: !navCollapsed}")

services/web/public/stylesheets/components/navbar.less

@@ -52,8 +52,6 @@
   overflow-x: visible;
   padding-right: @navbar-padding-horizontal;
   padding-left:  @navbar-padding-horizontal;
-  //border-top: 1px solid transparent;
-  box-shadow: inset 0 1px 0 rgba(255,255,255,.1);
   &:extend(.clearfix all);
   -webkit-overflow-scrolling: touch;
 
@@ -89,6 +87,33 @@
 }
 
 
+.navbar-main {
+  z-index: 1;
+  .container-fluid > .navbar-collapse {
+    // High specificity needed to override Bootstrap's default.
+    margin: 0;
+  }
+  .navbar-collapse {
+    // Use absolute positioning to build the hamburger menu.
+    position: absolute;
+    left: 0;
+    width: 100%;
+    margin: 0;
+    background-color: @navbar-default-bg;
+    border-bottom: solid 1px @navbar-default-border;
+    padding: 0 @navbar-default-padding-h;
+
+    @media (min-width: @grid-float-breakpoint) {
+      // Get back to regular layout mode as soon as the menu items are 
+      // expanded (i.e. not contained within the hamburguer menu).
+      position: static;
+      background-color: transparent;
+      border-bottom: 0;
+      padding-right: @navbar-padding-horizontal;
+      padding-left:  @navbar-padding-horizontal;
+    }
+  }
+}
 // Both navbar header and collapse
 //
 // When a container is present, change the behavior of the header and collapse.
@@ -543,3 +568,9 @@
   }
 
 }
+
+.navbar-default when (@is-overleaf = true) {
+  @media (min-width: @grid-float-breakpoint) {
+    padding: @navbar-default-padding-v 0;
+  }
+}

services/web/public/stylesheets/core/_common-variables.less

@@ -312,7 +312,7 @@
 @navbar-border-radius:             0;
 @navbar-padding-horizontal:        floor((@grid-gutter-width / 2));
 @navbar-padding-vertical:          ((@navbar-height - @line-height-computed) / 2);
-@navbar-collapse-max-height:       340px;
+@navbar-collapse-max-height:       380px;
 
 @navbar-default-color:             #777;
 @navbar-default-bg:                #fff;
@@ -811,7 +811,9 @@
 // Navbar
 @navbar-title-color         : #666;
 @navbar-title-color-hover   : #333;
-@navbar-default-padding     : 1rem 2rem;
+@navbar-default-padding-v   : 1rem;
+@navbar-default-padding-h   : 2rem;
+@navbar-default-padding     : @navbar-default-padding-v @navbar-default-padding-h;
 @navbar-brand-width         : 180px;
 @navbar-btn-font-size       : @font-size-base * 0.8;
 @navbar-btn-border-radius   : @border-radius-base;

services/web/public/stylesheets/core/ol-variables.less

@@ -95,7 +95,9 @@
 @labels-font-size        : 85%;
 
 // Navbar
-@navbar-default-padding           : (@grid-gutter-width / 2) 0;
+@navbar-default-padding-v         : (@grid-gutter-width / 2);
+@navbar-default-padding-h         : 10px;
+@navbar-default-padding           : @navbar-default-padding-v @navbar-default-padding-h;
 @navbar-default-link-color        : #FFF;
 @navbar-default-link-hover-bg     : @ol-green;
 @navbar-default-link-active-bg    : @ol-green;