Topbar

• By default, topbar has display: none; property. You should use display utility classes to make it visible on your desire screen size. For example, adding .d-lg-flex makes your topbar visible on desktop screens.
• The topbar has white background color. You can use utility classes to change background color, text color, text size, etc.
• By default, it has position: absolute; and will stay on top of your header. To revert this behaviour, simply add .position-static to your topbar.

The above notes should level-up your understanding from the topbar component. The following example is a basic example of a topbar:

<!-- Topbar -->
<section class="topbar d-lg-flex">
  <div class="container small-3">
    <nav class="nav">
      <a class="nav-link" href="#">About</a>
      <a class="nav-link" href="#">Terms</a>
      <a class="nav-link" href="#">Help</a>
    </nav>

    <div>TEL: +1 (123) 456 7890</div>
  </div>
</section><!-- /.topbar -->