Top (Navbar)

A responsive and flexible container and navbar

The top class will transform an element into a flexible container best suited for creating responsive navbars. The container can contain any combination of the following elements:

• top__brand a padded container for titles or images
• top__links to hold all of your nav links
• top__social for neatly spaced icons
• top__buttons for buttons
• top__burger a hamburger icon for toggling menus

<nav class="top has-bg-light">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links is-end">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="top__social">
    <ul>
      <li><a href="#"><i class="fab fa-facebook-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
    </ul>
  </div>
  <div class="top__buttons">
    <a href="#" class="button">Get started</a>
  </div>
</nav>
Copy

Using containers

You can use a container directly nested within the top element to position the contents within the center of the page. This behaves the same way as using a container on your page content.

<nav class="top">
  <div class="container">
    <div class="top__brand">
      <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png">
    </div>
    <div class="top__links">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </div>
</nav>
</> Show code
Copy

Elements

Brand

The top__brand element is used to hold heading and image HTML tags. The default bottom margin on heading elements will be removed.

<nav class="top has-bg-light">
  <div class="container">
    <div class="top__brand">
      <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
    </div>
    <div class="top__brand">
      <h2>OrbitCSS</h2>
    </div>
  </div>
</nav>
Copy

Links

The top__links element is primarily used to create a horizontal list from a ul tag. There are a number of Sass variables available to completely overhaul the styling for this list.

<nav class="top has-bg-light">
  <div class="top__links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">Products</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">About Us</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Blog</a></li>
    </ul>
  </div>
</nav>
Copy

Social icons

The top__social element will give you a neatly spaced horizontal list from a ul tag. This works best when used with icons.

<nav class="top has-bg-light">
  <div class="top__social">
    <ul>
      <li><a href="#"><i class="fab fa-facebook-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
    </ul>
  </div>
</nav>
Copy

Buttons

The top__buttons element should be used to used to hold buttons, either individually or in a button group. The default bottom margin on button elements will be removed.

<nav class="top has-bg-light">
  <div class="top__buttons">
    <div class="is-button-group">
      <a href="#" class="button is-primary">Sign up</a>
      <a href="#" class="button">Log in</a>
    </div>
  </div>
</nav>
Copy

Burger menu

The top__burger element creates a hamburger menu from a single empty span tag. When the is-active modifier is present the hamburger menu will display as a cross.

<nav class="top has-bg-light">
  <div class="top__burger">
    <span></span>
  </div>
  <div class="top__burger is-active">
    <span></span>
  </div>
</nav>
Copy

The has-animate modifier can be used to animate the transition from the 3 bars to a cross. Click the example below to preview.

<nav class="top has-bg-light">
  <div class="top__burger has-animate" onclick="this.classList.toggle('is-active')">
    <span></span>
  </div>
</nav>
</> Show code
Copy

Alignment

The following modifiers will allow you to easily control the alignment of your navbar elements.

Center alignment

The has-centered modifier will position all of the content to the center of the navbar.

<nav class="top has-bg-light has-centered">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</> Show code
Copy

Right alignment

The has-end modifier will align the contents from right to left.

<nav class="top has-bg-light has-end">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</> Show code
Copy

Use the is-end modifier if you only want to right align a single element.

<nav class="top has-bg-light">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links is-end">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</> Show code
Copy

Sticky positioning

The is-static modifier will stick the navbar to the top of the screen. This works best if toggled after the user starts scrolling.

<nav class="top has-bg-light is-static">
  <div class="top__brand">
    <img width="60px" src="orbitcss_logo.png" />
  </div>
  <div class="top__links is-end">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</> Show code
Copy

Dropdowns

Dropdowns can be used within the top__links element by applying the has-dropdown modifier to any list item. Refer to the dropdown module for a better understanding of how to use dropdowns.

<nav class="top has-bg-light">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links is-end">
    <ul>
      <li><a href="#">Home</a></li>
      <li class="has-dropdown has-arrow is-hoverable">
        <a href="#">Services</a>
        <ul class="dropdown">
          <li class="dropdown__link"><a href="#">Service 1</a></li>
          <li class="dropdown__link"><a href="#">Service 2</a></li>
        </ul>
      </li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
</nav>
</> Show code
Copy

Responsiveness

The is-mobile-responsive modifier can be used on the top element to make the navbar's content mobile responsive. When applied the following default changes occur:

• top__links, top__social and top__buttons are only visible on medium viewports (tablet devices) and greater.
• top__burger is only visible on mobile viewports.

The is-open modifier can then be applied to the top element to toggle the hidden content and transform the hamburger menu into a cross. The hidden content will now be displayed in a vertical format instead of horizontal.

Test it out below on a mobile viewport by clicking the hamburger menu.

<nav class="top has-bg-light is-mobile-responsive">
  <div class="top__brand">
    <img width="60px" src="https://orbitcss.com/img/orbitcss_logo.png" />
  </div>
  <div class="top__links is-end">
    <ul>
      <li><a href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </div>
  <div class="top__social">
    <ul>
      <li><a href="#"><i class="fab fa-facebook-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-twitter-square fa-2x"></i></a></li>
      <li><a href="#"><i class="fab fa-instagram fa-2x"></i></a></li>
    </ul>
  </div>
  <div class="top__buttons">
    <a href="#" class="button">Get started</a>
  </div>
  <div class="top__burger"
    onclick="this.closest('.top').classList.toggle('is-open')">
    <span></span>
  </div>
</nav>
Copy

Colors

You can use the color palette has-bg-* and has-text-* modifiers as an alternative to the SASS variables to easily style the navbar.

<nav class="top has-bg-primary has-text-white">
  ...
</nav>
<nav class="top has-bg-dark has-text-white">
  ...
</nav>
<nav class="top has-bg-warning">
  ...
</nav>
<nav class="top has-bg-success has-text-white">
  ...
</nav>
<nav class="top has-bg-black has-text-white">
  ...
</nav>
<nav class="top has-bg-light">
  ...
</nav>
Copy

CSS variables

You can customize the navbar elements using the following CSS variables.

.top {
  --padding: 1rem 0.75rem;
  --box-shadow: none;
}

/* Brand element */
.top__brand {
  --padding: 0 0.65rem;
  --font-color: inherit;
  --max-width: 200px;
}

/* Links element */
.top__links {
  --background-color: transparent;
  --font-color: inherit;
  --border-radius: 6px;
  --padding: 0;
  --link-padding: 0.3125rem 0.9375rem;

  --hover-background-color: hsl(0deg, 0%, 66%, 0.15);
  --hover-font-color: inherit;
  --active-background-color: transparent;
  --active-font-color: inherit;
}

/* Buttons element */
.top__buttons {
  --padding: 0 0.65rem;
}

/* Social element */
.top__social {
  --padding: 0 0.65rem;
  --font-color: inherit;
  --item-margin: 0 6px;
  --hover-font-color: inherit;
}

/* Burger element */
.top__burger {
  --font-color: inherit;
  --padding: 0 0.65rem;
  --width: 20px;
  --bar-height: 2px;
  --bar-gap: 4px;
  --transition-speed: 0.75s;
}
Copy

Sass variables

The default styles can be overridden with the following variables. Set one or more of these variables before you import the framework.