diff --git a/services/web/app/views/layout/navbar.pug b/services/web/app/views/layout/navbar.pug index 3d2d6600cc..0b162b27d2 100644 --- a/services/web/app/views/layout/navbar.pug +++ b/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}") diff --git a/services/web/public/stylesheets/components/navbar.less b/services/web/public/stylesheets/components/navbar.less index 47d76cc1f2..5390729c75 100755 --- a/services/web/public/stylesheets/components/navbar.less +++ b/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; + } +} diff --git a/services/web/public/stylesheets/core/_common-variables.less b/services/web/public/stylesheets/core/_common-variables.less index fc829c686b..d5a79947df 100644 --- a/services/web/public/stylesheets/core/_common-variables.less +++ b/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; diff --git a/services/web/public/stylesheets/core/ol-variables.less b/services/web/public/stylesheets/core/ol-variables.less index a4b04b27a8..6ffceaf176 100644 --- a/services/web/public/stylesheets/core/ol-variables.less +++ b/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;