How to attach hanging div underneath Bootstrap 5 sticky nav-CodePudding

Using Bootstrap 5, I've got a sticky nav, which works as expected, but I need to display a hanging div (.chat-tag) directly underneath the sticky nav for a chat feature. This "hanging tag" should remain attached to the sticky nav when the user scrolls down the page.

It seems to display properly at widths of 992 and below, but for desktop, it appears in the same row as the top navigation.

Here's what I have so far, which I've also posted to 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 >
  <div >
    <div >
      <nav >
        <div >
          <a  href="#">
            LOGO
          </a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a  aria-current="page" href="#what">Home</a>
              </li>
              <li >
                <a  href="#registry">Page 1</a>
              </li>
              <li >
                <a  href="#">Page 2</a>
              </li>
              <li >
                <a  href="#">Page 3</a>
              </li>
              <li >
                <a  href="#">Page 4</a>
              </li>
              <li >
                <a  href="#">Page 5</a>
              </li>
            </ul>
          </div>
        </div>
        <div >Chat with us</div>
      </nav>
    </div>
  </div>
</header>

<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <h1>Hello, world!</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
        scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
        ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
        nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
        nulla facilisi nullam vehicula ipsum.</p>

      <p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
        arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
        habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>

      <p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
        lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
        pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
        eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>

      <p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
        lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
        morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>

      <p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
        morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
        mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>

CodePudding user response：

This is a rare case where I'd resort to absolute positioning rather than trying to dance with flexbox.

.chat-tag {
  position: absolute; /* <------------- HERE */
  top: 100%; /* <------------------ AND HERE */
  background-color: rgba(181, 101, 167, 0.5); /* for fun | #B565A7 */
  transition: all 0.3s;  /* for fun */
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  width: 200px;
}

.chat-tag:hover {
  background-color: rgba(181, 101, 167, 1); /* for fun */
}

nav {
  background-color: red;
  height: 48px;
  position: sticky;
  top: 0;
}

.main-nav {
  display: inline-flex;
}

.masthead-fluid {
  background-color: #F7CAC9;
}

.masthead {
  height: 60vh;
  display: inline-flex;
  align-items: center;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css" rel="stylesheet" />
<header >
  <div >
    <div >
      <nav >
        <div >
          <a  href="#">
            LOGO
          </a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
            <span ></span>
          </button>
          <div  id="navbarSupportedContent">
            <ul >
              <li >
                <a  aria-current="page" href="#what">Home</a>
              </li>
              <li >
                <a  href="#registry">Page 1</a>
              </li>
              <li >
                <a  href="#">Page 2</a>
              </li>
              <li >
                <a  href="#">Page 3</a>
              </li>
              <li >
                <a  href="#">Page 4</a>
              </li>
              <li >
                <a  href="#">Page 5</a>
              </li>
            </ul>
          </div>
        </div>
        <div >Chat with us</div>
      </nav>
    </div>
  </div>
</header>

<div >
  <div >
    <div >
      <div >
        <div >
          <div >
            <div >
              <h1>Hello, world!</h1>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div >
  <div >
    <div >
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Aliquam id diam maecenas ultricies mi eget mauris pharetra et. Non enim praesent elementum facilisis leo vel fringilla. Feugiat
        scelerisque varius morbi enim. Ante metus dictum at tempor. Nec ultrices dui sapien eget mi proin. Accumsan lacus vel facilisis volutpat est velit egestas dui. Sit amet aliquam id diam. Vel fringilla est ullamcorper eget nulla. Malesuada fames
        ac turpis egestas sed tempus urna. Lectus nulla at volutpat diam ut venenatis tellus. Et netus et malesuada fames ac turpis egestas integer. Amet nisl suscipit adipiscing bibendum est. Faucibus et molestie ac feugiat. Pretium nibh ipsum consequat
        nisl vel pretium lectus. Vulputate mi sit amet mauris commodo quis imperdiet. A diam sollicitudin tempor id eu nisl. In egestas erat imperdiet sed euismod nisi. Aliquam malesuada bibendum arcu vitae elementum curabitur vitae. Nibh sit amet commodo
        nulla facilisi nullam vehicula ipsum.</p>

      <p>Malesuada fames ac turpis egestas maecenas pharetra convallis posuere morbi. Sit amet porttitor eget dolor morbi non arcu risus. Consectetur libero id faucibus nisl tincidunt eget nullam non. Sed risus ultricies tristique nulla aliquet. Tincidunt
        arcu non sodales neque. Scelerisque eleifend donec pretium vulputate sapien nec sagittis. Scelerisque fermentum dui faucibus in ornare quam. Ullamcorper eget nulla facilisi etiam dignissim. Vel elit scelerisque mauris pellentesque pulvinar pellentesque
        habitant. Magna fringilla urna porttitor rhoncus dolor purus non enim praesent.</p>

      <p>Faucibus purus in massa tempor nec feugiat nisl. Hendrerit gravida rutrum quisque non tellus orci ac auctor. Pretium viverra suspendisse potenti nullam ac tortor vitae purus. Lacus viverra vitae congue eu consequat ac felis. Iaculis urna id volutpat
        lacus. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper malesuada. Molestie at elementum eu facilisis sed odio morbi. Ac turpis egestas maecenas pharetra convallis. Aliquet risus feugiat in ante metus dictum at tempor commodo. Tortor
        pretium viverra suspendisse potenti nullam ac tortor vitae. Etiam non quam lacus suspendisse faucibus. Nunc lobortis mattis aliquam faucibus purus in. Gravida in fermentum et sollicitudin. Magna etiam tempor orci eu lobortis. Tellus in metus vulputate
        eu scelerisque. Purus semper eget duis at tellus at urna condimentum. Blandit aliquam etiam erat velit scelerisque in.</p>

      <p>Et malesuada fames ac turpis egestas integer eget. Quis ipsum suspendisse ultrices gravida dictum fusce ut placerat orci. Tincidunt praesent semper feugiat nibh sed. Purus ut faucibus pulvinar elementum. Pretium nibh ipsum consequat nisl vel pretium
        lectus. Donec ultrices tincidunt arcu non. Accumsan sit amet nulla facilisi morbi tempus iaculis. Turpis cursus in hac habitasse. Diam volutpat commodo sed egestas egestas fringilla phasellus faucibus. Porttitor massa id neque aliquam vestibulum
        morbi blandit. Velit ut tortor pretium viverra suspendisse. Tempus quam pellentesque nec nam aliquam. Odio ut enim blandit volutpat maecenas. Viverra nam libero justo laoreet.</p>

      <p>Ut aliquam purus sit amet luctus. Sapien faucibus et molestie ac feugiat sed. Tempus egestas sed sed risus pretium quam vulputate dignissim. Egestas fringilla phasellus faucibus scelerisque. Pretium lectus quam id leo in vitae. Porttitor eget dolor
        morbi non arcu risus quis varius. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus non. Ornare quam viverra orci sagittis eu volutpat odio facilisis mauris. Dictum non consectetur a erat nam at. Blandit massa enim nec dui nunc
        mattis enim ut tellus. Volutpat maecenas volutpat blandit aliquam etiam erat. Aliquet enim tortor at auctor urna nunc. Cras sed felis eget velit aliquet sagittis id consectetur. Diam quam nulla porttitor massa id neque aliquam vestibulum morbi.</p>
    </div>
  </div>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.2.0/js/bootstrap.min.js"></script>