I successfully implemented a sticky navigation using Bootstrap 5, and now I want to add a hanging div (.chat-tag) below the sticky nav for a chat feature. This "hanging tag" should stay attached to the sticky nav as the user scrolls down the page.
It's displaying correctly at widths of 992 and below, but on desktop, it's appearing in the same row as the top navigation.
Here's the current implementation which I've also shared on Codepen: https://codepen.io/Codewalker/pen/vYRoXdB?editors=1100
nav {
background-color: red;
height: 48px;
position: sticky;
top: 0;
}
.main-nav {
display: -webkit-flex;
display: inline-flex;
-webkit-justify-content: center;
}
.masthead-fluid {
background-color: #F7CAC9;
}
.masthead {
height: 60vh;
display: inline-flex;
align-items: center;
}
.chat-tag {
background-color: #B565A7;
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 200px;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header class="header sticky-top bg-white">
<div class="container-fluid">
<div class="nav-wrapper text-center">
<nav class="main-nav navbar navbar-expand-lg bg-white">
<div class="container-fluid text">
<a class="navbar-brand" href="#">
LOGO
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#what">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#registry">Page 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 2</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 3</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 4</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Page 5</a>
</li>
</ul>
</div>
</div>
<div class="chat-tag">Chat with us</div>
</nav>
</div>
</div>
</header>
<div class="container-fluid masthead-fluid mb-5">
<div class="row">
<div class="col-12">
<div class="color-overlay d-flex align-items-center">
<div class="container">
<div class="row">
<div class="col-12 masthead">
<h1>Hello, world!</h1>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-12">
<p>Text goes here...</p>
<p>More text goes here...</p>
<p>And more text goes here...</p>
<p>Final section of text...</p>
</div>
</div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>