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="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="orbitcss_logo.png" />
    </div>
    <div class="top__brand">
      <h2>OrbitCSS</h2>
    </div>
  </div>
</nav>
Copy

The top__links element is primarily used to create a horizontal list from a ul tag. There are a number of 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

You should use the top__links element when adding elements to your navbar that are not covered by this page. It will ensure your custom content has padding and is neatly positioned within the navbar flexbox.


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.

Some of these modifiers are not specific to the Top module and can be found within the OrbitCSS global modifiers.


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="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="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="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

Any elements placed after an element that has the is-end modifier will also be right aligned.



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 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="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="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

Variables

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


VariableTypeDefault value
$top-paddingpadding1rem 0.75rem
$top-brand-paddingpadding 0 0.65rem
$top-link-radiusunits6px
$top-link-paddingpadding0.3125rem 0.9375rem
$top-link-colorcolorinherit
$top-link-hover-backgroundcolorrgba(169, 169, 169, 0.15)
$top-link-hover-colorcolorinherit
$top-link-hover-decorationtext-decorationnone
$top-link-active-backgroundcolortransparent
$top-link-active-colorcolor$top-link-hover-color
$top-social-paddingpadding0 0.65rem
$top-social-marginmargin0 6px
$top-social-colorcolorinherit
$top-button-paddingpadding0 0.65rem
$top-burger-heightunits14px
$top-burger-widthunits20px
$top-burger-paddingpadding0 0.65rem
$top-burger-colorcolorinherit
$top-burger-bar-heightunits2px
$top-burger-bar-gapunits4px
$top-burger-transitionseconds.5s