[bracket plus]
Navigation
Information Summary

Memory Usage

##### 32.3%

8,6,5,9,8,4,9,3,5,9

CPU Usage

##### 140.05

4,3,5,7,12,10,4,5,11,7

Disk Usage

##### 82.02%

1,2,1,3,2,10,4,12,7

Daily Traffic

##### 62,201

3,12,7,9,2,3,4,5,2
Online Contacts

Marilyn Tarter

Clemson, CA
1 new

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI
3 new

Brandon Lawrence

Snohomish, WA
1 new

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Offline Contacts

Marilyn Tarter

Clemson, CA

Belinda Connor

Fort Kent, ME

Britanny Cevallos

Shiboygan Falls, WI

Brandon Lawrence

Snohomish, WA

Andrew Wiggins

Springfield, MA

Theodore Gristen

Nashville, TN

Deborah Miner

North Shore, CA
Recent Attachments

IMG_43445

JPG Image

1.2mb

VID_6543

MP4 Video

24.8mb

Tax_Form

Word Document

5.5mb

Getting_Started

PDF Document

12.7mb

Introduction

PDF Document

7.7mb

IMG_43420

JPG Image

2.2mb

IMG_43447

JPG Image

3.2mb

VID_6545

AVI Video

14.8mb

Secret_Document

Word Document

4.5mb

Time & Date

##

######

Events Calendar
Event Today
+ Add Event
Quick Settings

###### More Settings

Account Settings Privacy Settings

#### Navigation Layouts

Navigation share general markup and styles, from the base .nav class to the active and disabled states.

###### Horizontal Navbar Layout

Below is an example of different navbar layouts.

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-between">
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white tx-poppins mg-r-20">Logo</h4>
      <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
    </div><!-- ht-65 -->

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
      <a href="" class="tx-gray-600 hover-dark tx-18"><i class="fa fa-navicon"></i></a>
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white tx-poppins mg-r-20">Logo</h4>
      <div>
        <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
      </div>
    </div><!-- ht-65 -->

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-start mg-t-20">
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white mg-r-20 tx-poppins">Logo</h4>
      <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
      </ul>
      <div class="mg-l-auto">
        <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
      </div>
    </div><!-- ht-65 -->

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-between mg-t-20">
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white tx-poppins mg-r-20">Logo</h4>
      <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
      </ul>
      <div>
        <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
      </div>
    </div><!-- ht-65 -->

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-end mg-t-20">
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white tx-poppins mg-r-auto">Logo</h4>
      <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
      </ul>
      <div class="mg-l-20">
        <a href="" class="tx-gray-600 hover-dark tx-16"><i class="fa fa-search"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-facebook"></i></a>
        <a href="" class="tx-gray-600 hover-dark tx-16 mg-l-10"><i class="fab fa-twitter"></i></a>
      </div>
    </div><!-- ht-65 -->

#### Logo

Source Code

    <div class="ht-65 bg-black-2 pd-x-20 d-flex align-items-center justify-content-center mg-t-20">
      <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link active" data-toggle="tab" href="#" role="tab">Home</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">About</a></li>
      </ul>
      <h4 class="mg-b-0 tx-uppercase tx-bold tx-spacing--2 tx-white pd-x-30 tx-poppins">Logo</h4>
      <ul class="nav nav-gray-600 active-info tx-uppercase tx-12 tx-medium tx-spacing-2 flex-column flex-sm-row" role="tablist">
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Services</a></li>
        <li class="nav-item"><a class="nav-link" data-toggle="tab" href="#" role="tab">Contact</a></li>
      </ul>
    </div><!-- ht-65 -->

##### Item List

Source Code

    <div class="ht-65 bg-black-2 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
      </div>
      <h5 class="tx-bold tx-spacing-2 mg-b-0 tx-white">Item List</h5>
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
      </div>
    </div><!-- ht-65 -->

Source Code

    <div class="ht-65 bg-black-2 pd-x-15 d-flex align-items-center justify-content-between mg-t-20">
      <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-left"></i></button>
      <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th"></i></button>
        <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-th-list"></i></button>
      </div>
      <button type="button" class="btn btn-outline-light rounded-0"><i class="fa fa-chevron-right"></i></button>
    </div><!-- ht-65 -->