Cookiebot banner overlays footer section with imprint

i added the cookiebot plugin to my wordpress system and now i have the problem, that the imprint is not viewable when the banner is open.

I don't want the banner to come from the top.

I tried it with this:

.CybotCookiebotDialog {
margin-bottom: 368px;
}

But it's not showing up.

Thank you!

vera

TL;DR

You styled on a class it should be a div. You also styled on the wrong element it should be the footer. Your approach is not responsive cause the banner has different heights on different viewports. In answer 4 you'll find a solution

---

Hey,

you've multiple problems.

1.

The Cookiebot div has an ID not a Class called CybotCookiebotDialog

so your code would be like this:

#CybotCookiebotDialog {
     margin-bottom: 368px;
}

---

2.

The cookiebot div is a display: flex; and the calculation of this is done without the padding, thats why you have no result there, if the is position: sticky; you would have 368px of nothing under the cookiebanner.

---

3.

What you want is to make the footer larger so the notice isn't over your imprint. so you need to style this to your footer like

footer {
     margin-bottom: 368px;
}

But have in mind this isn't responsive and isn't looking to good on a mobile device etc. because the footer in this devices is often higher then it is on desktop.

---

4. Answer

So i created this code a good time ago cause i had the same problem.

First i created an element like this as last element before the footer ends

<div id="m-footer-spacer"></div>

have in mind that you can choose the id freely it's just the namespace i used.

then you add this js code it's partly in jquery but you can refactor it.

document.addEventListener("DOMContentLoaded", function (event) {

if ($('#CybotCookiebotDialog:visible').length !== 0) {
    $("#m-footer-spacer").height($('#CybotCookiebotDialog').outerHeight());
}

});

function CookiebotCallback_OnDialogDisplay() {
    $("#m-footer-spacer").height($('#CybotCookiebotDialog').outerHeight());
}


function CookiebotCallback_OnLoad() {
    $("#m-footer-spacer").height(0);
}

CybotCookiebotDialog:visible: i check if the banner is open in the initial page view.

CookiebotCallback_OnDialogDisplay if the user is opening the banner again to change his consent etc. the height is added again.

CookiebotCallback_OnLoad this is triggered when the user clicks on ok no matter if he accepted or not. Its for setting the div back to 0px;

If you want to have a fallback you can add the styles in a <noscript> tag, have in mind that it's only in html5 valid to use the <noscript> tag in the head

I intentionally did not use the $('document').ready(function(){}); cause i had a bug with the cookiebot and this function. I don't know if it's fixed now.

---

i hope it helps you. :)