Bootstrap Navigation Bar
With IconsThis item was made because of many requests of the users who
downloaded Get Shit Done Kit.

We restyled the classic Bootstrap Navbar and we added brand new icons. If you want to add icons to the regular navbar you have to add to your project these files:

        

              <link href="css/bootstrap.css" rel="stylesheet" />
              <link href="css/pe-icon-7-stroke.css" rel="stylesheet" />
              <link href="css/ct-navbar.css" rel="stylesheet" />

              <script src="js/jquery-1.10.2.js"></script>
              <script src="js/bootstrap.js"></script>
              <script src="js/ct-navbar.js"></script>
        

Important

Don't forget to add the font files('Pe-icon7-stroke.eot','Pe-icon-7-stroke.svg','Pe-icon-7-stroke.ttf','Pe-icon-7-stroke.woff') in "/Fonts/"

If you want to add the new icons to the navbar just change this code from your navbar:

            

                    <li><a href="#">Account</a></li>
            

With this one:

         

                    <li>
                        <a href="#">
                            <i class="pe-7s-user"></i>
                            <p>Account</p>
                        </a>
                    </li>
            

If you want to add a small badge, like the one that we have in our current navbar at "Messages" button, add this code:

         

                    <li>
                        <a href="#">
                            <i class="pe-7s-user">
                                <span class="label"> 23 </span>
                            </i>
                            <p>Account</p>
                        </a>
                    </li>
            

Besides the default navbar, we added 5 new colors: blue, azzure, green, orange, red. If you want to use one of them, you have to replace the 'navbar-default' with the class for the chosen color 'navbr-ct-{color}'.

Here is a full example of the blue navbar

    <nav class="navbar navbar-ct-blue navbar-fixed-top navbar-transparent" role="navigation">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand navbar-brand-logo" href="https://www.creative-tim.com">
                <div class="logo">
                    <img src="https://s3.amazonaws.com/creativetim_bucket/new_logo.png">
                </div>
                <div class="brand"> Creative Tim </div>
              </a>
        </div>
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
          <ul class="nav navbar-nav navbar-right">
                    <li>
                        <a href="javascript:void(0)" data-toggle="search">
                            <i class="pe-7s-search"></i>
                            <p>Search</p>
                        </a>
                    </li>
                    <li>
                        <a href="#">
                            <i class="pe-7s-mail">
                                <span class="label"> 23 </span>
                            </i>
                            <p>Messages</p>
                        </a>
                    </li>
            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                        <i class="pe-7s-user"></i>
                        <p>Account</p>
              </a>
              <ul class="dropdown-menu">
                <li><a href="#">Action</a></li>
                <li><a href="#">Another action</a></li>
                <li><a href="#">Something else here</a></li>
                <li class="divider"></li>
                <li><a href="#">Separated link</a></li>
              </ul>
            </li>
          </ul>
        </div><!-- /.navbar-collapse -->
      </div><!-- /.container-fluid -->
    </nav>
<!--  end navbar -->

Many thanks to our friends from Pixeden for the icons font. More details about the icons names can be found here.

Get more useful items for bootstrap on Creative Tim