Sub Nav Bar Example

by Erik Bartlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>
<nav class="navbar navbar-light navbar-default navbar-fixed-top animated fadeIn">
    <div class="navbar-header">
        <a class="navbar-brand" style="width: 100%;" href="/PADMII/en/App/welcome">
            <span class="navbar-text navbar-left appName" title="Portfolio Analytics Data Management Tool">PADM 2.0&nbsp;-&nbsp;</span>
            <span class="navbar-text navbar-left">Welcome Back </span>
        </a>
    </div>
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-5">
        <p class="navbar-text navbar-right">
            Signed in as <a href="/PADMII/en/user" class="navbar-link">Erik Bartlow</a>
        </p>
    </div>
</nav>
<nav class="padm-proj-nav navbar navbar-light navbar-default navbar-fixed-top fadeIn ">
    <div class="navbar-header">
        <table>
            <tr>
                <td><button class="btn btn-info"><i class="fa fa-angle-left"></i></button></td>
                <td> <button class="btn btn-info pull-right"><i class="fa fa-angle-right"></i></button>
                    <span class="btn-group pull-right">
          <button class="btn btn-mini">Select a Project</button>
          <button class="btn dropdown-toggle" data-toggle="dropdown">
            <span class="caret"></span>
                    </button>
                    <ul id="projList" class="dropdown-menu">
                        <li><a href="/Dashboards/Project?id=AM-NM1-CR-303441">AM-NM1-CR-303441</a></li>
                        <li><a...

CSS

body {
    background: #383838;
}

.padm-proj-nav {
    top: -32px !important;
    background-color: rgba(128, 128, 128, .7) !important;
    border-top: solid 1px #383838;
    min-height: 40px !important;
    max-height: 45px !important;
    vertical-align: middle;
    padding: 5px;
}

.padm-proj-nav .btn-group {
    display: inline-block;
}

.padm-proj-nav .navbar-header {
    min-width: 100% !important;
}

.padm-proj-nav table {
    width: 100%;
}

.navbar-default {
    border-color: #e7e7e7;
    transition-property: background-color;
    transition-duration: 2s;
    transition-timing-function: ease;
    background-color: rgba(0, 150, 214, 1);
    /* background-color: rgba(119, 119, 119, 0.40); */
}

.navbar {
    max-height: 80px;
}

.navbar-default {
    background-color: #0096D6;
    border-color: #e7e7e7;
}

.navbar-fixed-top {
    top: 0;
    border-width: 0 0 1px;
}

@media (min-width: 768px) {
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        border-radius: 0;
    }
    .navbar-fixed-top,
    .navbar-fixed-bottom {
        position: fixed;
        right: 0;
        left: 0;
        z-index: 1030;
    }
}

@media (min-width: 768px) {
    .navbar {
        border-radius: 4px;
    }
    .navbar {
        position: relative;
        min-height: 72px;
        max-height: 72px;
        margin-bottom: 30px;
    }
    .fadeIn {
        animation-name: fadeIn;
    }
    .animated {
        animation-duration: 1s;
        animation-fill-mode: both;
    }
    .navbar-default .navbar-text {
        color: #fff;
    }
}

@media (min-width: 992px) {
    .navbar-text {
        font-size: 18px;
        transition: font-size linear 1s;
    }
    .navbar-text {
        white-space: nowrap;
    }
}