Menu icon Foundation

My Posts

No Content

My Comments

Nathan brown commented on Albert's post almost 6 years

I've just posted my version of a quick fix:

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas

Not perfect, but it'll do for now!

Nathan brown commented on Tim Martin's post almost 6 years

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 :)

Posts Followed

No Content

Following

    No Content

Followers

My Posts

No Content

My Comments

You commented on Albert's post almost 6 years

I've just posted my version of a quick fix:

http://foundation.zurb.com/forum/posts/965-fixed-menu-using-offcanvas

Not perfect, but it'll do for now!

You commented on Tim Martin's post almost 6 years

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 :)

Posts Followed

No Content

Following

  • No Content

Followers

  • No Content