html - Top-fixed navbar with alert above it

Question

I have a web page that's using bootstrap 4.5

I'm struggling to add an alert above the fixed-top navbar. The alert is at the moment sitting on top of the navbar hiding half of it.

How can I keep the navbar top-fixed and yet have an alert above it?

My alert code is very simple:

<div th:fragment="covid-alert" class="covid-alert alert alert-info alert-dismissible fade show" role="alert">
    ...some text...
    <button type="button" class="close" data-dismiss="alert">&times;</button>
</div>

and the navbar is simply:

<nav id="main-navbar" th:fragment="navbar" class="navbar navbar-expand-lg navbar-dark fixed-top">
 ... 
</nav>

question from:https://stackoverflow.com/questions/65904713/top-fixed-navbar-with-alert-above-it

Answer 1

You may add sticky-top to your navbar and wrap your covid alert with a header.

I created a sample you may check this link. https://stackblitz.com/edit/js-p5fcgf?file=index.html