JSFiddle - React, Tailwind, and code Playground

BS3 custom nav 6 / 2 full width

by Andrew Pougher

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.js"></script>
<div class="container" ng-app="myApp" ng-controller="MainCtrl">
  <div class="row text-center navbar navbar-inverse navbar-fixed-top customnav">
    <div class="col-lg-2 col-md-2 col-xs-6  hidden-lg hidden-md hidden-sm"><i class="pull-left fa fa-cog fa-2x"></i> LOGO</div>
    <div class="col-lg-2 col-md-2 col-xs-6 hidden-xs">HOME</div>
    <div class="col-lg-2 col-md-2 col-xs-6">two / six</div>
    <div class=" col-lg-2 col-md-2 col-xs-6">two / six</div>
    <div class=" col-lg-2 col-md-2 col-xs-6">two / six</div>
    <div class=" col-lg-2 col-md-2 col-xs-6">two / six</div>
    <div class=" col-lg-2 col-md-2 col-xs-6">two / six</div>

  </div>


  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
  <br>.
 ...

CSS

.customnav > div[class*='col-'] {
  border-top: 1px solid #e2e2e2;
  transition: all 0.3s ease-in;
  min-height: 35px;
  line-height: 35px
}

.navbar.customnav {
  min-height: 35px;
}

.customnav {
  -webkit-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.3);
}

.handle {
  position: relative;
  z-index: 100;
  background: blue;
  height: 12px;
  width: 90px;
  display: block;
  margin: 140px auto;
}

.navbar-fixed-top {
  margin-bottom: 0;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus,
.navbar-inverse .navbar-nav > .active > a,
.navbar-inverse .navbar-nav > .active > a:hover,
.navbar-inverse .navbar-nav > .active > a:focus {
  color: #888888;
  background-color: white;
  border-radius: 0;
}

.navbar-inverse .navbar-collapse,
.navbar-inverse .navbar-form {
  border-color: rgba(255, 255, 255, 0.5);
}

.navbar-inverse {
  background-color: rgba(255, 255, 255, 0.8);
}

.navbar-inverse {
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-inverse .navbar-brand {
  padding: 0 15px;
  float: none;
  color: #5c5c5c;
  opacity: 1;
  text-decoration: none;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  transition: all 0.5s;
}

.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  opacity: 1;
}


/* drop down link text*/

.navbar-inverse .navbar-nav li a {
  color: #5e5e5e;
}

.navbar-inverse .navbar-nav li a:hover {
  color: rgba(255, 255, 255, 0.5);
}

@media (min-width: 768px) and (max-width: 991px) {
  .customnav > div[class*='col-'] {
    border-top: 1px solid #e2e2e2;
    transition: all 0.3s ease-in;
    min-height: 15px
  }
}

@media (min-width: 768px) {
  .customnav > div[class*='col-'] {
    border-top: 1px solid #e2e2e2;
    transition: all 0.3s ease-in;
    min-height: 15px
  }
  .navbar-inverse .navbar-nav > .active > a,
 ...

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MainCtrl', function($scope, $timeout, $http, $window) {
  'use strict';





})