Problem solved!
The solution: Simply added two lines to the javascript of adding the .sticky class to navigation (nav). It moves the nav element before the .curtains class in the DOM with jQuery insertBefore() method.
The old code (don't worked):
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
} else {
$('nav').removeClass('sticky');
}
};
New working code:
// if we've scrolled more than the navigation, change its position to fixed to stick to top,
// otherwise change it back to relative
if (scrollTop > stickyNavTop) {
$('nav').addClass('sticky');
$( "nav" ).insertBefore( $( ".curtains" ) ); //moving the menu before the .curtain class
} else {
$('nav').removeClass('sticky');
$( "nav" ).insertAfter( $( "header" ) ); // putting back after the header element
}
};