From: Geoff Kimball <geoff@zurb.com>
Date: Tue, 24 Nov 2015 23:19:21 +0000 (-0800)
Subject: Fix z-index issues with revealed off-canvas menus, and add option to make them fixed... 
X-Git-Tag: v6.0.4~7^2~4
X-Git-Url: http://git.ipfire.org/cgi-bin/gitweb.cgi?a=commitdiff_plain;h=2ccd5c62037a1c7796bfa5d7d1a3fb76d243a82e;p=thirdparty%2Ffoundation%2Ffoundation-sites.git

Fix z-index issues with revealed off-canvas menus, and add option to make them fixed-position, closes #7154
---

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 48f49e46e..1a0a22e5a 100644
--- a/docs/pages/off-canvas.md
+++ b/docs/pages/off-canvas.md
@@ -93,6 +93,10 @@ The left- and right-hand off-canvas panes can be set to be persistent on larger
 
 The main content area (`.off-canvas-content`) will be padded to the left or right equal to the width of the container.
 
+<div class="callout">
+  <p>The menu will be fixed-position by default, meaning it follows you as you scroll up and down. The menu also gets its own scroll bar if it's taller than the window. To disable these features, set the <code>$offcanvas-fixed-reveal</code> variable to <code>false</code>.</p>
+</div>
+
 <div class="warning callout">
   <p>The slide in/out of the plugin still works when these classes are active. If you use this feature on a larger screen, be sure to hide any click triggers on those larger breakpoints as well. Foundation's <a href="visibility.html">visibility classes</a> can help you with that.</p>
 </div>
diff --git a/scss/components/_off-canvas.scss b/scss/components/_off-canvas.scss
index 5065e0d92..cd67b85b7 100644
--- a/scss/components/_off-canvas.scss
+++ b/scss/components/_off-canvas.scss
@@ -26,6 +26,9 @@ $offcanvas-transition-length: 0.5s !default;
 /// @type Keyword
 $offcanvas-transition-timing: ease !default;
 
+/// If `true`, a revealed off-canvas will be fixed-position, and scroll with the screen.
+$offcanvas-fixed-reveal: true !default;
+
 /// Background color for the overlay that appears when an off-canvas menu is open.
 /// @type Color
 $offcanvas-exit-background: rgba($white, 0.25) !default;
@@ -137,6 +140,11 @@ $maincontent-shadow: 0 0 10px rgba($black, 0.5) !default;
   $position: left
 ) {
   #{$position}: 0;
+  z-index: auto;
+
+  @if $offcanvas-fixed-reveal {
+    position: fixed;
+  }
 
   & ~ .#{$maincontent-class} {
     margin-#{$position}: $offcanvas-size;