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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 8 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 7 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 7 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 7 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 7 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 6 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 6 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 6 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.


Start Building Your Site or App!

Foundation lets you quickly prototype and create sites and apps that work on any device (smartphones up through desktops and TV displays) with a library of tested components.

Download Foundation 5

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