Menu icon Foundation
off-canvas with fixed top bar

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

offcanvastopbarfixed

Hello,

I'm trying to display an off-canvas menu inside a fixed top bar.

The problem is, when i click the trigger of the off-canvas inside the fixed top bar, the top bar goes on top of the document, and when i close the off-canvas, the top bar returns to it's fixed position again

Here is an example: http://jsfiddle.net/nebuchar/Sbt75/

Richard Fitzjohn almost 6 years ago

It's because elements with "translate3d" will create a new "local coordinate system" (http://www.w3.org/TR/css3-transforms/#transform-rendering) which means position fixed relates to ".inner-wrap" and not the document as normal.

I've just encountered the issue (I'm not using top bar - but my own fixed header) and moved my header out of '.inner-wrap' (just before it).

To get it moving with the page I added it to the off canvas CSS like so:

.inner-wrap,
.your-header {
  transition: transform 500ms ease;
}

.move-right > .inner-wrap,
.move-right > .your-header {
  transform: translate3d(250px, 0, 0);
}

Also the 'exit-off-canvas' will appear behind the header - again I think it's an issue with using translate3d and the way it handles z-index. A quick fix for this was to add the anchor ".exit-off-canvas" within the header as well.

I've not done a massive amount of testing yet - but it appears to work fine.

I'll be interested to find out if any one else has got a solution for this.

Rui Alexandre almost 6 years ago

I could use a hand on this one, as well!

Thanks!

Caleb Winters almost 6 years ago

Thanks @Richard! We'll work on adding support for a fixed top bar in future releases of Foundation.

Karl Ward almost 6 years ago

Just wanted to offer my experience on this topic: I managed to set off-canvas menu to be fixed, by removing the transform3D and replacing with left/right positioning. Although the off-canvas menu is now properly fixed, the result is less attractive as the animation is sluggish, especially on mobile devices.

The only way to achieve the best of both worlds, would be to move the .off-canvas-menu outside the .inner-wrap element, so that fixed positioning is not affected by transform3D. Technically, this would mean animating- and positioning page-content and the off-canvas-menu as two separate detached elements. This would basically also require a re-write of the Foundation 5 off-canvas-menu, which unfortunately I can't see happening soonish.

I think having a fixed off-canvas-menu is quite crucial for mobile devices where you want a fixed menu button always available in viewport. If I am scrolled far down on the page and click the off-canvas menu, it is quite unsatisfactory that the menu might be scrolled way out of view ...

I did hack a pseudo-fixed position for the off-canvas-menu, achieved by adding a top-padding above the menu that is proportional with the current window scrollTop on menu open. Not satisfactory, but better than nothing.

Here is the SASS hack to achieve fixed menu, but with inferior transition performance, if anyone is interested:

.inner-wrap {
  @include transition (left 200ms ease);
}
.move-left .inner-wrap {
  left: -250px;
  @include transform(none);
}
.right-off-canvas-menu {
  position: fixed;
  right: -250px;
  @include transform(none);
  @include transition (right 200ms ease);
}
.move-left .right-off-canvas-menu {
  right: 0px;
}

Mitra Mejia almost 6 years ago

@Karl It would be great to see a fiddle of it !

Martin Kearn almost 6 years ago

As others have suggested, the only way I was able to get the effect working was to not use Foundation top bar and use my own instead. However it I think it is working OK, the only problem I've not resolved yet is that the top bar is not fixed when the off canvas menu is expanded.
```HTML

          <!-- Off Canvas Menu -->
          <aside class="right-off-canvas-menu">
              <!-- whatever you want goes here -->
              <ul>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
                  <li><a href="#">Item 1</a></li>
              </ul>
          </aside>

          <!-- main content goes here -->
          <div style="width:100%; height: 50px; background-color: yellow;" class="fixed" >
                  <span>This is my fixed top nav bar </span>
                  <a class="right-off-canvas-toggle right">Show Menu</a>
          </div>


          <div class="row" style="margin-top: 50px;">
            <div class="small-12 columns" >
                <h1>Main page</h1>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
                <p>The main page content goes here</p>
            </div>
          </div>

          <!-- close the off-canvas menu -->
          <a class="exit-off-canvas"></a>

      </div>
  </div>

Karl Ward almost 6 years ago

As debated earlier, "fixed" for both the menu button and the menu itself are a problem for the off-canvas menu. Immediately when the off-canvas menu is opened, it uses translate3d() CSS, which basically nullifies the position:fixed. I have tried substituting the translate3d css with other positioning CSS, but this makes the animation sluggish since it is not hardware-accelerated.

For the menu button, you can place it outside (before) the .inner-wrap element, so that it is not affected by translate3D and works nicely with position:fixed css.

My solution for the menu itself was to add some javascript to position an inner element in the menu vertically based on the scroll, once the menu is opened. This is a hack far from flawless, but to me it was an improvement.

Clement almost 6 years ago

I've got the topbar and off-canvas menu working as they should EXCEPT if I manually resize the browser from large or medium (topbar use) to small (off-canvas use). In other words: if the browser is loaded when the browser has a small window: all good, and if it is loaded with a large window: all good too... Just no resizing between the two or I end up with the same problem you guys have described. I'm guessing that few users would try such a resize in real-life... aside from my client perhaps?

Clement almost 6 years ago

Here's an update on Albert's fiddle to show what I mean: http://jsfiddle.net/Sbt75/9/

And here is the pure html:

<body>
    <div class="off-canvas-wrap">
        <div class="inner-wrap">
            <aside class="left-off-canvas-menu">
                <ul class="off-canvas-list">
                    <li><label>Menu</label></li>
                    <li><a>item 1</a></li>
                    <li><a>item 2</a></li>
                    <li><a>item 3</a></li>
                    <li><label>FAQ</label></li>
                    <li><a>item 4</a></li>
                    <li><a>item 5</a></li>
                </ul>
            </aside>
            <nav class="tab-bar show-for-small">
                <a class="left-off-canvas-toggle menu-icon">
                    <span></span>
                    Small
                </a>
            </nav>

<!--use Foundation top-bar element for all but small screens-->

            <div class="contain-to-grid fixed">
                <nav class="top-bar hide-for-small" data-topbar>
                    <section class="top-bar-section">
                        <ul class="title-area left">
                            <li class="hide-for-small">
                                <a>Large Title</a>
                            </li>
                        </ul>

<!-- Right Nav Section -->

                        <ul class="right">
                            <li><a>item 1</a></li>
                            <li><a>item 2</a></li>
                            <li class="has-dropdown"> <a href="#">FAQ</a>
                                <ul class="dropdown">
                                    <li><a>item 4</a></li>
                                    <li><a>item 5</a></li>
                                </ul>
                            </li>
                            <li><a>item 3</a></li>
                        </ul>
                    </section>
                </nav>
            </div> <a class="exit-off-canvas" href="#"></a>
            <article class="small-12 columns">
                <br/>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
                <p>Content</p>
            </article>
            <footer class="small-12 columns">
                <div>...</div>
            </footer>
        </div>
    </div>
</body>

ernst wemmers almost 6 years ago

Is there any news on this? I have the same problem, and i really like to fix it!

Thanks for the update!

Karl Ward almost 6 years ago

It won't get fixed unless Foundation refactor the off-canvas menu entirely.

ernst wemmers almost 6 years ago

Damn.. so fixed header with off-canvas is no option with foundation?

Karl Ward almost 6 years ago

I heard through the grapevine that they are working on a solution.

acme almost 6 years ago

Let's hope they are finding a solution for this issue soon, I'm having the same problem. On mobile devices users are getting nuts if they always have to scroll to the top to open the off-canvas menu.

Reece Conrad almost 6 years ago

Another vote! Bump :)

Raphael Essoo-Snowdon almost 6 years ago

Bump.

Kaue Ribeiro almost 6 years ago

Bump for resolution, please.

Richard Snape almost 6 years ago

Me too. Glad I'm not just missing something simple

Jay Greenwood almost 6 years ago

I'm also hoping to see this issue resolved.

Tonybyte almost 6 years ago

Oh noooo! I switched from bootstrap for this feature and have been searching everywhere for the solution. I can't believe this is a problem. :(