Bootstrap Header Navigation

by Steve Coffman

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/holder/2.3.1/holder.min.js"></script>
<div class="row">This row is just to make jsfiddle move down a bit.</div>
<div class="row">
    <div class="col-xs-12 col-sm-7 col-sm-push-5">
        <div class="dropdown pull-right"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">edwardsm <b class="caret"></b></a>

            <ul class="dropdown-menu">
                <li><a href="#">Log Out</a>

                </li>
                <li class="divider"></li>
                <li><a href="#">Switch to Neurology</a>

                </li>
                <li><a href="#">Switch to Internal Medicine</a>

                </li>
            </ul>
        </div>
    </div>
    <div class="col-xs-12 col-sm-2 col-sm-pull-7">
        <div class="center-block">
            <img src="holder.js/80x120/social" />
        </div>
    </div>
    <div class="col-xs-12 col-sm-3 col-sm-pull-7">
         <h1 class="amadeus center-block text-center">Amadeus</h1>

    </div>
</div>
<div class="row">
    <nav class="navbar navbar-default" role="navigation">
        <div class="navbar-header">
            <div class="navbar-brand hidden-xs visible-sm">
                 <div class="amadeus"><img src="holder.js/80x120/social" />Amadeus</div>
            </div>
            <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>
        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:500);
 @import url(http://fonts.googleapis.com/css?family=Playball);
 .row {
    border: 1px solid;
}
.col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, col-xs-10, col-xs-11, .col-xs-12 {
    border: 1px solid red;
}
.col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, col-sm-10, col-sm-11, .col-sm-12 {
    border: 1px solid green;
}
.col-md-1, .col-md-2, .col-md-3, .col-md-4, col-md-5, .col-md-6, .col-md-7, .col-md-8, .col-md-9, col-md-10, col-md-11, .col-md-12 {
    border: 1px solid blue;
}
.col-lg-1, .col-lg-2, .col-lg-3, .col-lg-4, col-lg-5, .col-lg-6, .col-lg-7, .col-lg-8, .col-lg-9, col-lg-10, col-lg-11, .col-lg-12 {
    border: 1px solid purple;
}
.navbar-brand {
    border: 1px solid yellow;
}
.navbar-nav {
    border: 1px solid orange;
}
.amadeus {
    font-family:'Playball' !important;
    font-weight: 500;
    font-size:44pt;
    border: 1px solid green;
}
ul.nav-tabs li a {
    font-family:Raleway;
    background-color: #83B4DD;
    color: #333333;
}
.Playball-normal-400 {
    font-family:'Playball' !important;
    font-style: normal;
    font-weight: 400;
}