Page with Mega Menu header small text goes here...

<div id="header" class="app-header">
  <div class="navbar-header">
    ...
    <button type="button" class="navbar-mobile-toggler" data-bs-toggle="collapse" data-bs-target="#top-navbar">
      <span class="fa-stack fa-lg text-dark">
        <i class="far fa-square fa-stack-2x"></i>
        <i class="fa fa-cog fa-stack-1x mt-1px"></i>
      </span>
    </button>
  </div>

  <div class="collapse d-md-block me-auto" id="top-navbar">
    <div class="navbar-nav">
      <div class="navbar-item dropdown dropdown-lg">
        <a href="#" class="navbar-link dropdown-toggle pe-md-2" data-bs-toggle="dropdown">
          <i class="fa fa-th-large fa-fw me-1 me-md-0"></i> 
          <span class="d-lg-inline d-md-none">
            Mega <b class="caret ms-1 ms-md-0"></b>
          </span>
        </a>
        <div class="dropdown-menu dropdown-menu-lg">
          ...
        </div>
      </div>
      ...
    </div>
  </div>
  
  <div class="navbar-nav">
    ...
  </div>
</div>