Fix z-index issues with revealed off-canvas menus, and add option to make them fixed...

diff --git a/docs/pages/off-canvas.md b/docs/pages/off-canvas.md
index 48f49e46e759e71a3dd509cf2c3f2befa157b7d8..1a0a22e5a5f2a1f2995896d4fc966e2861da7951 100644 (file)
--- 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 5065e0d927cc0abb199e400020c3a428980b2abf..cd67b85b7b4afa58cfceb695349244bdfabcdeec 100644 (file)
--- 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;