TheSaaS — Nav

Basics

Few tricks to know before continue to styles and variations.

UL Markup

Nav Markup

Aligned center

Aligned right

`.nav-fill`

`.nav-justified`

`.flex-column`

Styles

Change the UI and colors with several utility classes.

`.nav-dark`

`.nav-light`

`.nav-uppercase`

`.nav-bold`

`.nav-bolder`

Variations

Few more inline navigation types

`.nav-pills`

`.nav-slash`

`.nav-dot`

`.nav-iconic`

In Page Navigation

A component which is fixed to one side of your page and can scroll to a section by selecting it.

Add the following code to the end of your HTML file (after footer), and don't forget to add id attribute to your sections. You can add nav-page-left class to the .nav-page element to place the navigation at the left side of the page. Please note that you can't have more than one .nav-page in your page.

You can change offset of navigation change by adding a data-spy-offset="300" to your .nav-page. Default value is 200.

<ul class="nav-page">
  <li class="nav-item">
    <a class="nav-link active" href="#basics" title="Basic"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#styles" title="Styles"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#variations" title="Variations"></a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#in-page" title="In Page Navigation"></a>
  </li>
</ul>