Menu icon Foundation
Fixed menu using Offcanvas

I've come across a problem while using Offcanvas for a fixed mobile navigation menu. Unless you are at the very top of the page, you aren't able to see all of the items in the menu.

Here are some screenshots to further illustrate the issue:

At the top of the page it works fine:

https://f.cloud.github.com/assets/2474058/1721519/2590358a-6225-11e3-9eca-9cea29c21c1a.png
https://f.cloud.github.com/assets/2474058/1721520/2a42301a-6225-11e3-997b-39c3165745ab.png

When you have scrolled down the page:

https://f.cloud.github.com/assets/2474058/1721522/2ffe4962-6225-11e3-9b5b-e44430b086a3.png
https://f.cloud.github.com/assets/2474058/1721523/345c026a-6225-11e3-8af3-c28f2d9f66f9.png

Any workarounds?

Thanks.

fixednavoff-canvasnavigationstickyfeature request

I've come across a problem while using Offcanvas for a fixed mobile navigation menu. Unless you are at the very top of the page, you aren't able to see all of the items in the menu.

Here are some screenshots to further illustrate the issue:

At the top of the page it works fine:

https://f.cloud.github.com/assets/2474058/1721519/2590358a-6225-11e3-9eca-9cea29c21c1a.png
https://f.cloud.github.com/assets/2474058/1721520/2a42301a-6225-11e3-997b-39c3165745ab.png

When you have scrolled down the page:

https://f.cloud.github.com/assets/2474058/1721522/2ffe4962-6225-11e3-9b5b-e44430b086a3.png
https://f.cloud.github.com/assets/2474058/1721523/345c026a-6225-11e3-8af3-c28f2d9f66f9.png

Any workarounds?

Thanks.

Angela almost 6 years ago

I'm having the exact same issue. On top of that, my fixed header became unfixed when opening the menu from the middle of the page

Jeremy Englert almost 6 years ago

I don't believe off-canvas supports the sticky navigation (at this point). The docs make no mention of it.

Angela almost 6 years ago

I see

Tim Martin almost 6 years ago

Ok, no worries. I thought somebody might have found a way around the problem. Thanks anyway.

Rafi Benkual almost 6 years ago

Hey Tim and everyone else who is following this subject.

We have received many questions about this topic. We will label it a feature request. You can see that our Designer Caleb agrees that this makes sense. We are looking into possibly adding this to a point release.

http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar

Feather Light almost 6 years ago

Yes Brother,
I agree with you all to added feature fixed menu with off canvas.
I hope Zurb Tim is following this subject.

Yes We have received many questions about this topic, but it is very possible fiture. Zurb team may be considering about this, because I think Zurb team probably know best practices to make it with the right way

I have a fixed menu example :

http://paultrifa.com/envato/themeforest/swipebody/

Tim Martin almost 6 years ago

Awesome! Thanks, Rafi.

Nathan brown over 5 years ago

Here's a quick fixed that seems to work, although the header jumps a little when hiding the off-canvas:

$topbar-height: rem-calc(45);
.off-canvas-wrap {
  header.header,
  .left-off-canvas-menu,
  .right-off-canvas-menu
   {
     position: fixed;
     top: 0;
     z-index: 10;
  }
  header.header {
     width: 100%;

  }
  #content {
    padding-top: $topbar-height;
  }
}
#content {
  padding-top: $topbar-height;
}

and JS

     var $offCanvas = $('.off-canvas-wrap');
    if ($offCanvas[0]){
        var $right = $('.right-off-canvas-menu');
        var $left = $('.left-off-canvas-menu');
        var $rightToggle = $('.right-off-canvas-toggle');
        var $leftToggle = $('.left-off-canvas-toggle');
        var $exitToggle = $('.exit-off-canvas');

        var $header = $('header.header');
        var resetTops = function(){
            $left.css("padding-top", 0);
            $right.css("padding-top", 0);
            $header.css("margin-top", 0);
            $header.css("position", "fixed");
        }
        $rightToggle.on("click", function(e) {
            console.log($offCanvas.hasClass('move-left'));
                    $right.css("padding-top", $(window).scrollTop());
                    $header.css("margin-top", $(window).scrollTop());
        });
        $leftToggle.on("click", function(e) {
                    $left.css("padding-top", $(window).scrollTop());
                    $header.css("margin-top", $(window).scrollTop());
        });


      $exitToggle.on("click", resetTops);
    }

If anyone would like to play a little to solve the jump, that'd be great :)

Thomas Janotta over 5 years ago
Jean-Edouard Benois over 5 years ago

When should the solution be ready?

Rafi Benkual over 5 years ago

5.3 will be out in about 3 weeks. You can see the activity here: http://zurb.us/1hyvzfn

There is a lot of great fixes queued up, as well as many great ones already closed.

Rafi Benkual over 5 years ago

Since the content lives in a wrap, there is a better way to make the tabbar header appear fixed. A scrollable container inside the wrap would do this. We tested it and it works great. There is a new class that would need to be added. Unfortunately it conflicts with other components such as magellan and joyride. We need to find a way to add it without breaking the other stuff.

Nicolas Morand about 5 years ago

As we are still waiting for a good offcanvas in fixed position, here is a kind of quick fix I made…

.move-right .inner-wrap { position: fixed; }

It makes you come to the top of the page, but… it is what you have to do anyway if the position is not fixed.
Hope it will be definitly fix soon.

David Peters about 5 years ago

Isn't a better fix to have a fixed height (100vh) with scroll enabled on the main body's wrap and set the offcanvas to 100vh too?

Ilze Bilze almost 5 years ago

This works great!

.off-canvas-wrap.move-left {
  position: fixed;
  height: 100%;
  .inner-wrap {
    height: 100%;
  }
}

Norbert Stüken almost 5 years ago

@Rafi Benkual: Any descent fix coming? Or is there perhaps an external off-canvas menu solution recommended instead of? Unfortunately, all posted solutions had their drawbacks so far.

Rafi Benkual almost 5 years ago