JSFiddle - React, Tailwind, and code Playground

by joshmoto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<div class="navbar navbar-expand-lg bg-white d-flex flex-nowrap justify-content-between align-items-center top-menu">
  LOGO
</div>
<div class="scroll-menu">
  <nav class="nav nav-menu">
    <div class="nav-menu-l">
      <a class="nav-link nav-title active" href="#"> Title</a>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" data-boundary="scrollParent" aria-haspopup="true" aria-expanded="false">
          <span class="badge badge-secondary">10</span> Menu
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Menu 1</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 2</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 3</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 4</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 5</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Menu 6</a>
        </div>
      </li>
      <a class="nav-link nav-title" href="#" style="width: 600px">
      </a>
    </div>
    <div class="nav-menu-r">
      <a class="btn btn-primary btn-sm" href="#">Print</a>
    </div>
  </nav>
</div>

<div class="main">
  Qui cum venisset ob haec festinatis itineribus Antiochiam, praestrictis palatii ianuis, contempto Caesare, quem videri decuerat, ad...

CSS

.top-menu {
  height: 50px;
  border-bottom: 1px solid #eff0f6;
  z-index: 10;
}

.scroll-menu {
  position: sticky;
  top: 0px;
  z-index: 2;
  height: 2.75rem;
  overflow-y: hidden;
  height: 70px;
  box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
  background-color: #fff;
}

.scroll-menu .nav-menu {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  height: 70px;
  overflow-x: auto;
  color: rgba(255, 255, 255, .75);
  text-align: center;
  white-space: nowrap;
  padding-right: 1rem;
  padding-left: .5rem;
}

.nav-menu-l, .nav-menu-r {
  display: flex;
  flex-wrap: nowrap;
}

.main {
  padding: 20px;
  height: 900px;
}