Bootstrap 3 Template

This is a simple Twitter Bootstrap 3 template. You can fork it to get a ready to use Bootstrap 3 fiddle.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<div class="container hidden-sm hidden-xs">
		<div class="row">
	    <div class="brand col-md-5 col-sm-5"><img src="media/img/logo.png" alt="Driven Car Sales" class="img-rounded logo-custom"></div>
		<div class="phone-div col-md-7 col-sm-7">
		<!--<h3 class="phone-number"><i class="glyphicon glyphicon-phone"></i> 01429 7654287</h3>-->
		</div>
		</div>
      </div>
	<!-- Main Logo End -->
	<!-- Navbar Start -->
<nav class="navbar hidden-sm hidden-xs navbar-default affix-top nav-links" data-spy="affix" data-offset-top="100" role="navigation">
    <div class="container">
        <button class="navbar-toggle" data-target="#i-want-this-to-collapse" data-toggle="collapse" type="button"> <span class="icon-bar"></span>  <span class="icon-bar"></span>  <span class="icon-bar"></span> 
        </button>
        <div class="navbar-header">
            <a class="navbar-brand" href="/">
                <img src="media/img/nav-logo.png" alt="Driven Car Sales Logo" class="img-rounded logo-nav navbar-brand" />
            </a>
        </div>
        <div>
            <ul class="nav navbar-nav">
                <li><a href="#">Used Cars</a>

                </li>
                <li><a href="#">Get Finance</a>

                </li>
                <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">About Driven<strong class="caret"></strong></a>

                    <ul class="dropdown-menu">
                        <li> <a href "#">The Team</a>

                        </li>
                        <li> <a href "#">Our Partners</a>

                        </li>
                    </ul>
                    <!--Drop Down End-->
                </li>
                <li><a href="#">How To Find Us</a>

                </li>
                <li><a href="#">Contact Us</a>

   ...

CSS

.logo-nav {
	height: 2.3em;
	width: auto;
}

.brand {
	font-size: 2em;
	margin: 20px 0 25px;
}

.navbar-brand {
	opacity: 0;
	color: #ff0066;
	-webkit-transition:opacity 0.3s ease-in;
	-moz-transition:opacity 0.3s ease-in;
	-o-transition:opacity 0.3s ease-in;
	transition: opacity 0.3s ease-in;
	margin-left: 0px;
}

.navbar {
	border-radius: 0px;
	border-left: none;
	border-right: none;
}

.navbar-default .navbar-nav>.open>a, .navbar-default .navbar-nav>.open>a:hover, .navbar-default .navbar-nav>.open>a:focus {
	color: #fff;
	background-color: #DD3B4D;
}

.navbar-default .navbar-nav>li>a:hover, .navbar-default .navbar-nav>li>a:focus { color: #fff; }

.dropdown-menu {
	color: #fff;
	background-color: #DD3B4D;
}

.dropdown-menu>li>a { color: #fff; }

nav.affix {
	top: 0;
	width: 100%;
	z-index: 1000;
}

nav.affix .navbar-brand {
	opacity: 1;
	height: 2.3em;
	width: auto;
}

.navbar-header {
	width: 0px;
 -webkit-transition:width .4s ease-in-out;
 -moz-transition:width .4s ease-in-out;
 -o-transition:width .4s ease-in-out;
 transition:width .4s ease-in-out;
	margin: 0 1em 0 1em
}

nav.affix .navbar-header {
	width: 8em;
 -webkit-transition: width .4s ease-in-out;
 -moz-transition: width .4s ease-in-out;
 -o-transition: width .4s ease-in-out;
 transition: width .4s ease-in-out;
	margin: 0 1em 0 0;
}

.nav-links {
	font-family: 'Open Sans', sans-serif;
	font-weight: 700;
}

.navbar-nav > li:last-child { border-right: 1px solid #475d88; }

ul.nav a:hover {
	color: #fff !important;
	background-color: #DD3B4D !important;
	-webkit-transition: background-color 0.6s ease;
	-moz-transition: background-color 0.6s ease;
	-o-transition: background-color 0.6s ease;
	transition: background-color 0.6s ease;
}

nav.affix .navbar-brand { display: inline-block; }

.navbar-default .navbar-collapse { border-color: #DD3B4D; }

.navbar-collapse {
	padding-right: 0px;
	padding-left: 0px;
}

/* end of navbar */
.mini-navbar {
	opacity: 1;
	padding: 5px 0;
}


/* Large screens -----------...