Issue with fixed header

[minemindmedia]

First of all, thank you for this awesome menu!!!

I am having trouble getting it to work with a fixed header. When opening the menu, I have it set to push the content to the right. It works fine on first page load but if I scroll down and then open the menu, the fixed header disappears. I can't figure out what is causing this to happen. Hope you have a solution, thank you.

[somewebmedia]

Can you provide me with some demo so I can check what's happening?

[Phoenixy]

Hi, I also saw this happening to me as well, but I think this is the expected behavior, so I have no problems with it. If you open the menu on the top of the page (without any scrolling), the fixed header won't disappear, but if you scroll down, then open the menu there, the fixed header disappears.

[Exacore]

You can try to fix this bug with thoses lines of code (jQuery) :

// Resize function resize() { // Sticky Fix var headerHeight = $('.header').outerHeight(); $('.header').css('position', 'fixed'); $('.header').next().css('margin-top', headerHeight + 'px'); } window.addEventListener('resize', resize); resize();

[somewebmedia]

Ah I see, when the menu opens, if you have pushContent option enabled, the container element gets transform property which displaces any fixed child element. Here is the explanation of why that's happening: https://stackoverflow.com/questions/15194313/transform3d-not-working-with-position-fixed-children/15256339#15256339

So a workaround would be something like this:

var $fixed_header = $('#fixed-header'); // your fixed header element
var $container = $('#container'); // element that you've set to pushContent

Nav.on('toggle', function(e, settings) {
  if (e.data.action == 'open') {
    $fixed_header.css('top', -$container.offset().top);
  }
});

Nav.on('close', function(e, settings) {
  $fixed_header.css('top', 0);
});