TEL: +98 (123) 456 7890

## Basics

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>
        </nav>

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

TEL: +1 (123) 456 7890

## Variations

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

TEL: +1 (123) 456 7890 info@website.com

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

English