Menu Header still visible despite css custom

Hi @lilianstudio – your age-gate class is slightly off. You can do this:

.age-gate__restricted #main-header {
    display: none !important;
}

And it should work.

Thanks
Phil

Hi @lilianstudio,

Do you mean here?

If so, once age gate is closed, the styles I gave you stop doing anything so this isn’t an age gate issue – you’d need to pad your container to account for the fixed element (which it looks like you’ve done while I typed this!)

Thanks
Phil

Hi again – so there’s a couple more things to do;

There’s a bit of extra style to account for your separate mobile header:

.age-gate__restricted #main-header,
.age-gate__restricted .divi-mobile-menu {
    display: none !important;
}

Next, because of how Divi calculates the padding on page load, you need some JS to mimic what they do as there is no height to the header when age gate is showing:

window.addEventListener('age_gate_hidden', () => document.getElementById('page-container').style.paddingTop = document.getElementById('main-header').offsetHeight + 'px');

That can go in a JS file if you have one available in your theme.

You can expand that, and check elements exist if you need to, here’s and example:

window.addEventListener('age_gate_hidden', () => {
    var container = document.getElementById('page-container');
    var header = document.getElementById('main-header');

    if (container && header) {
        container.style.paddingTop = header.offsetHeight + 'px';
    }
});

Thanks
Phil