Body padding in layout with web block in header

My layout page has a header - fairly normal.

However I also want to be able to display a webblock above or at the top of the header

This webblock is a banner across the top of the page that displays text: It might be hidden, it might have 1 line of text, it might have two.

In the base layout, the content body is pushed down to allow for the size of the header:

.layout .main {
    /* Space between the main content and the top of the screen, calculated automatically in the Layout JS */
    --header-gutter: var(--header-size);
    padding-top: var(--header-gutter);

But the web block size isn't taken into account.

Is there a way to make the layout properly calculate the header height and consequently position the body correctly?

Hi Michael,

You can change CSS variables with JavaScript. In the same place you decide if you have 1 or 2 lines you can run that code to change the CSS variable. You can check how to do that update here.