CSS: position: fixed shift div - html

Question

I have a custom hellobar in the main template of a website. I would like to move it from the main template to inside a particular page.
This is a hellobar that popup 5 seconds after the page is loaded. Please note that I remove all the javascript part to simplify. If I change hellobar-wrapper to position: absolute or fixed the div is positioned on top of the page but over the header. I would that initially the header is on top and when the hellobar is displayed it shift the header below the bar, so the header is still visible.
HTML:
<!-- Remove hellobar from here -->
<!--<div id="hellobar">Hellobar here</div>-->
<!-- /hellobar -->
<!-- Header -->
<div id="header">
Header here.
</div>
<div id="content">
<!-- hellobar should be here -->
<div class="hellobar-wrapper">
Hellobar content here
</div>
<!-- /hellobar -->
<!-- More content here -->
<div>
more content here
</div>
</div>
</body>
CSS:
.hellobar-wrapper {background-color: #fff; padding: 10px 0px; position: static; top: 0; width: 100%; z-index: 1; border-bottom: 1px solid #eee}

Answer 1

I would suggest to you to add the following to the hellobar-wrapper class in css:
display: none;
Moreover, create in css the following class:
.active {
display: block;
}
Finally, add to your code in Javascript, the following when you load wrapper after five seconds:
$(".hellobar-wrapper").addClass("active");
The code above uses jQuery, therefore add the following in your html code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script>
In this way, after five seconds with JavaScript you will display the wrapper correctly, adding the class .active, and you will hide it before the five seconds by default with the css. Please also invert the position of header and wrapper. The wrapper, indeed, will be not visible before the 5 seconds, and the header will be on top. After five seconds, the header will shift since wrapper will be visible