Here's some notes to know how our topbar works, before getting deeper into it.

  • 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>

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

TEL: +1 (123) 456 7890


You can create your own topbar using the available components and utility classes.

TEL: +1 (123) 456 7890

652 Main Road, Apt 12, New York (123) 456 7890