Bootstrap Navigation

by Gulam Jilani

HTML

<div class="example2">
    <nav class="navbar navbar-default">
        <div class="container-fluid">
            <div class="navbar-header">
                <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar2">
                    <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" href="http://disputebills.com"><img src="http://res.cloudinary.com/candidbusiness/image/upload/v1455406304/dispute-bills-chicago.png" alt="Dispute Bills">
                </a>
            </div>
            <div id="navbar2" class="navbar-collapse collapse">
                <ul id="navigation" class="nav navbar-nav navbar-right">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Contact</a></li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Dropdown <span class="caret"></span></a>
                        <ul class="dropdown-menu " role="menu">
                            <li><a href="#">Action</a></li>
                            <li><a href="#">Another action</a></li>
                            <li><a href="#">Something else here</a></li>
                            
                           
                            
                        </ul>
                    </li>
                </ul>
            </div>
            <!--/.nav-collapse -->
        </div>
        <!--/.container-fluid -->
    </nav>
</div>

CSS

.navbar-brand {
    padding: 0px;
}

.navbar-brand>img {
    height: 100%;
    padding: 15px;
    width: auto;
}


/*************************
EXAMPLES 2-7 BELOW 
**************************/


/* EXAMPLE 2 (larger logo) - simply adjust top bottom padding to make logo larger */

.example2 .navbar-brand>img {
    
}

/* CSS Transform Align Navbar Brand Text ... This could also be achieved with table / table-cells */

.navbar-alignit .navbar-header {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    transform-style: preserve-3d;
    height: 50px;
}

.navbar-alignit .navbar-brand {
    top: 50%;
    display: block;
    position: relative;
    height: auto;
    transform: translate(0, -50%);
    margin-right: 15px;
    margin-left: 15px;
}

.navbar-nav>li>.dropdown-menu {
    z-index: 9999;
}

body {
    font-family: "Lato";
}
.active
{
 color:green;
    background-color:;
}

JavaScript

$(document).ready(function(){
      $("li a").click(function(event){
           $('#navigation li').removeClass();
           $(this).parent().addClass('active');   
           event.preventDefault();
          
      });
  });