$( document ).ready(function() {
    //Stap 1: zoek het notificatie element op (de gele balk)
    var $bar = $(".notification-bar");
    var $navbar = $("#mainnavbar")
    // als .length = 0 return
    if(!$bar.length)
    return;
    //Stap 2: bepaal de hoogte van het element
    //var barHeight = $bar.height();
    var navbarheight = $navbar.height();
    // als hoogte = 0 return
    if(!navbarheight)
    return;
    var newHeight = navbarheight;
    //Stap 3: pas de padding-top van de body aan met nieuwehoogte+baseHeight
    $("body").css("padding-top", newHeight + "px" );
    //Stap 4: pas de top van de navbar-mobile aan naar nieuwehoogte
    $("#navbar-mobile").css("top", newHeight + "px");
    
    $bar.find("button.close").one("click", function(){
    var $bar = $(".notification-bar");
    $bar.remove();
    var $navbar = $("#mainnavbar")
    var oldheight = $navbar.height() - $bar.height();
    $("body").css("padding-top", oldheight + "px" ).trigger('calcnotificationoffset');
    $("#navbar-mobile").css("top", oldheight + "px");

    });
    });

    $('body').on('calcnotificationoffset', function() {
    var $bar = $(".notification-bar");
    var $barHeight = $bar.height();
     var $navbar = $("#mainnavbar");
        if ($('body').hasClass('pagenav-fixed') && $barHeight > 0 && $(window).width() < 768){
            $('#pagenav').css({top: $barHeight});
        }
else if ($('body').hasClass('pagenav-fixed') && $barHeight > 0 && $(window).width() > 768){
$('#pagenav').css({top: $navbar.height()});
}
else{
$("#pagenav").css({top: ""});
}
   });