Bootstrap Header Navigation actually working!

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>
<header class="container-fluid amadeus-header">
    <div class="row" role="header">
        <div class="col-xs-12 col-sm-7 col-sm-push-5">
            <div class="dropdown pull-right" th:if="${user != null}">
                <div class="dropdown-toggle" id="userName" data-toggle="dropdown"><span th:text="${user.userLabel}">Default Name</span>  <span class="caret"></span>

                </div>
                <ul id="userList" class="dropdown-menu" role="menu" aria-labelledby="userName">
                    <li><a href="https://weblogin.umich.edu/cgi-bin/logout?https://www.umms.med.umich.edu/msis/applications/">Log Out</a>

                    </li>
                    <li sec:authorize-url="/admin/switch-user" th:unless="${user.isImpersonatingUser()}"><a href="#" th:href="@{/admin/switch-user}">Switch User</a>

                    </li>
                    <li th:if="${user != null and user.isImpersonatingUser()}"><a href="#" th:href="@{/home/switch-back}">Switch Back</a>

                    </li>
                    <li class="divider"></li>
                    <li th:if="${not #sets.isEmpty(user.departments) and #sets.size(user.departments) > 1}" th:each="department : ${user.departments}">	<a th:id="${department.id}" th:text="${'Switch to ' + department.departmentName}">Switch to Department</a>

                    </li>
                    <li th:if="${not #sets.isEmpty(user.departments) and #sets.size(user.departments) == 1}">	<a><em th:text="${user.focusedDepartment.departmentName}">Department Name</em></a>

               ...

CSS

@import url(http://fonts.googleapis.com/css?family=Raleway:500);
 @import url(http://fonts.googleapis.com/css?family=Playball);
 .amadeus {
    font-family:'Playball' !important;
    font-weight: 500;
    font-size:28pt;
}
.amadeus-header {
    background-color: #00274c;
    color: #ffffff;
}
.amadeus-subtitle {
    font-size: 9pt;
    font-family:'Raleway' !important;
    font-style: normal;
    font-weight: 400;
}
ul.nav-tabs li a {
    font-family:Raleway;
    background-color: #83B4DD;
    color: #333333;
}
@media (min-width: 768px) {
    .pull-right-sm {
        float: right !important;
    }
    .pull-left-sm {
        float: left !important;
    }
}
@media (min-width: 992px) {
    .pull-right-md {
        float: right !important;
    }
    .pull-left-md {
        float: left !important;
    }
}
@media (min-width: 1200px) {
    .pull-right-lg {
        float: right !important;
    }
    .pull-left-lg {
        float: left !important;
    }
}
.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;
}