Sticky Announcement Header

CSS

[insert name of top navbar] {
  padding: 20px;
}

.announcement-top-bar {
  position: -webkit-sticky;
  position: -moz-sticky;
  position: -ms-sticky;
  position: -o-sticky;
  position: sticky;
  top: 0;
}

.announcement-top-bar p {
  margin: 0;
}

.announcement-top-bar.alert-dismissible .close {
  top: 50%;
  transform: translateY(-55%);
}

Stickey Header

<div class="alert alert-warning alert-dismissible fade show announcement-top-bar" role="alert">
  <p class="d-none d-md-block">This is the content of the announcement bar <a href="#" target="_blank" class="btn btn-primary">Click here</a></p>
  <p class="d-block d-md-none">This is the content of the announcement bar <a href="#" target="_blank">Click here</a></p>
  <button type="button" class="close" data-dismiss="alert" aria-label="Close">
    <span aria-hidden="true">&times;</span>
  </button>
</div>

see https://anhkarppinen.com/sticky-announcement-bar-bootstrap/