HubSpot – Show the Privacy Cookie Consent Banner above the Body instead of an Overlay

When you enable the Cookie Policy in HubSpot you only have two options, either to show it as a top banner or as a bottom banner.

The top banner is going to be a fixed banner, making it an overlay on the content at the top.

Use the following jQuery code to push the body up/down when the banner is displayed/hidden.

    //Add a listner to get the status of the consent banner
    _hsq.push(['addPrivacyConsentListener', function(consent) {
            console.log(consent.allowed);
            if ($('#hs-eu-cookie-confirmation:visible').size() > 0){
                $('body').css('margin-top', $('#hs-eu-cookie-confirmation').height() + 'px');
            } else {
                $('body').css('margin-top', '0');
            }       
    }]);
    //Detect when the banner is inserted into the DOM
    $('body').on('DOMNodeInserted', '#hs-eu-cookie-confirmation', function(e) {
        console.log(e.target);
        if ($('#hs-eu-cookie-confirmation:visible').size() > 0){
                $('body').css('margin-top', $('#hs-eu-cookie-confirmation').height() + 'px');
        }
    });

Hope this helps!