1

I've been scouring the internet looking for a solution to this, but haven't yet found one.

I have a site with a sticky header/nav that has a hamburger button to open an off canvas menu. The off-canvas-wrapper wraps everything, including the header. The header nav works, but when you open the off canvas menu, the header disappears. On top of that, if you are scrolled down the page, you don't see the menu items in the off canvas menu - you have to scroll up.

Someone online suggested taking the header/nav out of the off-canvas-wrapper-inner, which prevents the bar from disappearing, but you are unable to click the menu bar to close the off canvas menu.

Has anyone else found a solution to this?

bmac
  • 55
  • 8
  • What do you mean by "the header disappears"? It moves too far to the right or it isn't visible at all? – Yass Mar 19 '16 at 22:45
  • it moves to the right, but then it disappears. – bmac Mar 21 '16 at 13:10
  • @bmac Are wanting the hamburger bar to be sticky on small screen, and, you want the header visible on small screen as well? Also, do you mean it when you write that the hamburger icon is on the header on all screen sizes? – Chris O Mar 21 '16 at 13:28
  • No way to know what the issue is without a live example. Can you replicate the issue in a [fiddle](https://jsfiddle.net)? – Yass Mar 21 '16 at 17:56
  • 1
    actually you want something like this http://codepen.io/rafibomb/pen/hApKk its foundation 5 solution i am still trying to find out whats problem there :( hope to find it soon – Hassan Apr 11 '16 at 22:25

1 Answers1

0

I have got a solution:

Move sticky/fixed div outside "off-canvas-content".

<div class="off-canvas-wrapper">
 <div class="off-canvas position-left" data-off-canvas id="offCanvasL">
   <!-- LEFT MENU -->
 </div>
 <div class="off-canvas position-right" data-off-canvas id="offCanvasR">
   <!-- RIGHT MENU -->
 </div>
 <div class="fixed_div">
   <div class="menu_left" data-toggle="offCanvasL"><!-- OPEN LEFT MENU  --></div>
   <div class="menu_right" data-toggle="offCanvasR"><!-- OPEN RIGHT MENU --></div>
 </div>
 <div class="off-canvas-content" data-off-canvas-content>
  <!-- YOUR CONTENT-->
 </div>
</div>

Then we need some CSS rules:

.fixed_div {
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 10;
  transform: none;
  transition: transform .5s ease;
  backface-visibility: hidden;
}

.fixed_div.is-open-right.has-transition-push {
    transform: translateX(-250px);
}

.fixed_div.is-open-left.has-transition-push {
    transform: translateX(250px);
}

Last think that we need to do is add some JQUERY to ours app.js:

$('.menu_left').click(function() {
    $('.fixed_div').toggleClass('is-open-right has-transition-push has-position-right');
});
$('.menu_right').click(function() {
    $('.fixed_div').toggleClass('is-open-left has-transition-push has-position-left');
});
$('.close-button, .js-off-canvas-overlay').click(function() {
    $('.fixed_div').removeClass('is-open-right is-open-left has-transition-push has-position-right has-position-left');
});

and that is all :)

WrapTheCode
  • 11
  • 2