Is there a way to fix the off-canvas navigation (even on mobile) and also have the side men auto-collapse if a link is clicked. Id like to send several of the links to anchors on the page, so the menu should collapse, and then send us down the page. As of right now, the menu stays open after sending us down the page

fixedoff-canvasmenuauto-collapse

Is there a way to fix the off-canvas navigation (even on mobile) and also have the side men auto-collapse if a link is clicked. Id like to send several of the links to anchors on the page, so the menu should collapse, and then send us down the page. As of right now, the menu stays open after sending us down the page

Adrian K 10 months ago

sorry for hijacking - Im also looking for something around the same line, if anyone knows how please share.

Tried Sticky and Fixed both caused the medium-up screens to be locked on to top of the page and without auto close it leaves a big tall side navigation.

Adrian K 10 months ago

ok dont know why i didnt try this before -

you can add class sticky to div before nav and get it to stick but it jumps. and the side fly out navigation will not stick.

still looking for a way to get fly out menu to stick and auto close, tried adding nav for off-canvas-menu and sticky does not work.

 ``` <div class="sticky">
          <nav class="tab-bar hide-for-large">

            <a class="left-off-canvas-toggle menu-icon">
              <span>Menu</span>
            </a>

          </nav>  
        </div>

Feather Light 10 months ago

Try read this http://foundation.zurb.com/docs/components/topbar.html#positioning-the-bar and http://foundation.zurb.com/docs/components/offcanvas.html
I write the code for my template and working well, maybe you can modified :
```
<!--for fixed off-canvas menu stay on the top -->

Menu

...

<!-- close the off-canvas menu when content clicked -->

Feather Light 10 months ago

Try read this http://foundation.zurb.com/docs/components/topbar.html#positioning-the-bar and http://foundation.zurb.com/docs/components/offcanvas.html
I write the code for my template and working well, maybe you can modified :

```

<!--for fixed off-canvas menu stay on the top -->

Menu

<!-- Here Your Content -->

<!-- close the off-canvas menu when content clicked -->

Feather Light 10 months ago

Ouh, sorry insert code for comment make me crazy :p
And then look the jquery $(window).scroll(function() documentation, *because know foundation 5 not use zepto again, and i like this :p
For example link I get a many lessons with this link http://www.hongkiat.com/blog/smart-header-footers-jquery
Hope it helps, _^

Adrian K 10 months ago

I'm sorry but can you paste the code again please, the menu part.

<!--for fixed off-canvas menu stay on the top -->

Menu

<!-- Here Your Content -->

Feather Light 10 months ago

I'm confused, did you and Jason Gould is the same person ? =P
Sorry for earlier, what you want is that I'm talking about ? :)
Does this link http://www.hongkiat.com/blog/smart-header-footers-jquery you still can not understand, or perhaps not that what you mean?

Please read again http://foundation.zurb.com/docs/components/topbar.html#positioning-the-bar and also http://foundation.zurb.com/docs/components/offcanvas.html to make your menu stay on top and implement off canvas menu.
Maybe you can include your code
And tell me again what your problem now :)

Adrian K 10 months ago

I have same question as Jason, i want know to know if there is a way to have off-canvas fixed or sticky or autoclose once the anchor tag is clicked.

The position bar does not work it just fixes the Off-canvas Nav , but not the slide out menu.

<div class="off-canvas-wrap">
      <div class="inner-wrap">


          <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list links">
              <li><label class="first">Menu</label></li>
              <li><a href="#home">Home</a></li>
              <li><a href="#what">What We Do</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#services">Services</a></li>
              <li><a href="#blog">Blog</a></li>
              <li><a href="#contact">Contact</a></li>
            </ul>  
          </aside>


          <nav class="tab-bar hide-for-large">

            <section class="left-small">
              <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>

            <section class="right tab-bar-section">
              <h1 class="title ">Adrian</h1>
            </section>

          </nav>  
<div id="home"> <!---Content---> </div>
<div id="what"> <!---Content---> </div>
<div id="about"> <!---Content---> </div>
<div id="services"> <!---Content---> </div>
<div id="blog"> <!---Content---> </div>
<div id="contact"> <!---Content---> </div>


  <a class="exit-off-canvas"></a>

      </div>
    </div>  



```Javascript 

 ```$(document).ready(function() {

  $(".links a").click(function() {
    $("html, body").animate({
      scrollTop: $($(this).attr("href")).offset().top - "50"
    }, {
      duration: 700,
      easing: "swing"
    });
    return false;
  });



});

Feather Light 10 months ago

Ok, I will try one by one. Hope it helps

<div class="off-canvas-wrap">
    <div class="inner-wrap">
  <!-- Insert class fixed to stay on top-->
        <div class="fixed">
        <nav class="tab-bar ">
            <section class="left-small">
                <a class="left-off-canvas-toggle menu-icon" ><span></span></a>
            </section>
            <section class="right tab-bar-section">
                <h1 class="title ">Adrian</h1>
            </section>
        </nav> 
  </div>
  <aside class="left-off-canvas-menu">
            <ul class="off-canvas-list">
                <li><label class="first">Menu</label></li>
    <!-- Give link class:exit-off-canvas-link so not have style like exit-off-canvas -->
                <li><a class="exit-off-canvas-link" href="#home">Home</a></li>
                <li><a class="exit-off-canvas-link" href="#what">What We Do</a></li>
                <li><a class="exit-off-canvas-link" href="#about">About</a></li>
                <li><a class="exit-off-canvas-link" href="#services">Services</a></li>
                <li><a class="exit-off-canvas-link" href="#blog">Blog</a></li>
                <li><a class="exit-off-canvas-link" href="#contact">Contact</a></li>
            </ul>   
        </aside>    
  <!-- Your Content-->
        <a class="exit-off-canvas"></a>
    </div>
</div>    
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation/foundation.js"></script>
<script src="js/foundation/foundation.offcanvas.js"></script>
<script>$(document).foundation();</script>

Go to foundation.offcanvas.js, my example is added new function(*for your implement you can override or something else) exit-off-canvas-link for hide out
See line 32, remove ';' (and move to last function) and added new function for this class

 .on('click.fndtn.offcanvas', '.exit-off-canvas-link', function (e) {
          e.preventDefault();
          $(".off-canvas-wrap").removeClass("move-right");
 })
.on('click.fndtn.offcanvas', '.exit-off-canvas-link', function (e) {
          e.preventDefault();
          $(".off-canvas-wrap").removeClass("move-left");
});

For now you try to like it, does it work ? :D

Adrian K 10 months ago

Thanks!! for the help :D, i tried it out it works the auto close, then it glitches.

Have a look at it might give you better understanding hard to explain.

The Off-canvas fixes itself on top then when i open it it goes back to its position the anchor tag does not move to the div im targeting to.

http://whitemassif.com/wm7832/

the off-canvas triggers after 1000px.

Mercer 10 months ago

I am getting all caught up here! Thank you both for stepping in and trying to solve this for us!! Looks like you are getting close. Hopefully between the three of us, we can figure this out

Kolsvein Hainz 10 months ago

Did this ever get resolved? I'm trying to figure out how to make the off-canvas sticky / fixed too. Have tried so many combinations but no luck.

Kenneth Williams 10 months ago

I managed to work out the auto close

I added a class nav-list to the ul list i wanted listening to ( the main navigation links in the side bar)
then did this.

 $('.nav-list a').click(function(e){
    $('.off-canvas-wrap').removeClass('move-right');
})

Does anyone have a better way?

Caleb Winters 10 months ago

This is not currently supported in Foundation out of the box. We'll explore some solutions and general off-canvas improvements for future releases.

Karl Ward 9 months ago

To auto-close the off-canvas, just trigger the "exit-off-canvas" when clicking any button inside your menu:

 $(".off-canvas-list a").on("click.toggleCanvas", function(){
  $(".exit-off-canvas").click();
});

Jakub Mroz 9 months ago

Hi guys,

I have started building a new application and found this debate quite interesting.

I am thinking what's the best way of achieving static top-bar and canvas-list and I might have an idea about breaking it up and using custom js.

I can't hold on for long time on this so will try to solve it quickly.

Once it's done I will let you know (and if any of you is faster than me please let me know).

Jakub Mroz 9 months ago

Hi guys,

I've spent some time investigating this issue.
It's caused by using transform 3d css.

In order to make it working I have applied some custom css and updated foundation offset javascript.
If anyone urgently need the solution let me now.

In the meantime I am testing this and shortly will post working recipe.

Karl Ward 9 months ago

I could have told you that in my post here http://foundation.zurb.com/forum/posts/547-off-canvas-with-fixed-top-bar (scroll down). There are some issues with the off-canvas menu that make it less desirable.


Become Foundation Certified!

Get Hired Faster- Earning certification from ZURB demonstrates that you have the skills necessary to take full advantage of Foundation.

Get Certified

Score an awesome product engineering or design job
via Job Board from ZURB