.navbar-progress {
    background-color: #f8f8f8;
    overflow: hidden;
    border: none;
}
.navbar-progress .navbar-brand {
    color: #777;
}
.navbar-progress .navbar-brand:hover,
.navbar-progress .navbar-brand:focus {
    color: #5e5e5e;
}
.navbar-progress .navbar-text {
    color: #777;
}
.navbar-progress .navbar-nav > li > a {
    color: #777;
}
.navbar-progress .navbar-nav > li > a:hover,
.navbar-progress .navbar-nav > li > a:focus {
    color: #333;
}
.navbar-progress .navbar-nav > .active > a,
.navbar-progress .navbar-nav > .active > a:hover,
.navbar-progress .navbar-nav > .active > a:focus {
    color: #fff;
    background-color: #428bca;
}
.navbar-progress .navbar-nav > .disabled > a,
.navbar-progress .navbar-nav > .disabled > a:hover,
.navbar-progress .navbar-nav > .disabled > a:focus {
    color: #ccc;
}
.navbar-progress .navbar-toggle {
    border-color: #ddd;
}
.navbar-progress .navbar-toggle:hover,
.navbar-progress .navbar-toggle:focus {
    background-color: #ddd;
}
.navbar-progress .navbar-toggle .icon-bar {
    background-color: #888;
}
.navbar-progress .navbar-collapse,
.navbar-progress .navbar-form {
    border-color: #e7e7e7;
}
.navbar-progress .navbar-nav > .open > a,
.navbar-progress .navbar-nav > .open > a:hover,
.navbar-progress .navbar-nav > .open > a:focus {
    color: #fff;
    background-color: #428bca;
}
@media (max-width: 767px) {
    .navbar-progress .navbar-nav .open .dropdown-menu > li > a {
        color: #777;
    }
    .navbar-progress .navbar-nav .open .dropdown-menu > li > a:hover,
    .navbar-progress .navbar-nav .open .dropdown-menu > li > a:focus {
        color: #333;
    }
    .navbar-progress .navbar-nav .open .dropdown-menu > .active > a,
    .navbar-progress .navbar-nav .open .dropdown-menu > .active > a:hover,
    .navbar-progress .navbar-nav .open .dropdown-menu > .active > a:focus {
        color: #555;
        background-color: #e7e7e7;
    }
    .navbar-progress .navbar-nav .open .dropdown-menu > .disabled > a,
    .navbar-progress .navbar-nav .open .dropdown-menu > .disabled > a:hover,
    .navbar-progress .navbar-nav .open .dropdown-menu > .disabled > a:focus {
        color: #ccc;
    }
}
@media (min-width:768px){

    .navbar-progress .navbar-nav > li > a {
        padding-left: 60px;
    }

    .navbar-progress .navbar-nav > li > a:before { 
        content: " "; 
        display: block;
        border-top: 50px solid transparent;       
        border-bottom: 50px solid transparent;
        border-left: 30px solid white;
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: 100%;
        margin-left: 5px;
        z-index: 100; 
    }
    .navbar-progress .navbar-nav > li > a:after { 
        content: " "; 
        display: block;
        border-top: 50px solid transparent;
        border-bottom: 50px solid transparent;
        border-left: 30px solid #f8f8f8;
        position: absolute;
        top: 50%;
        margin-top: -50px;
        left: 100%;
        z-index: 200; 
    }
    .navbar-progress .navbar-nav > li.active > a:after,
    .navbar-progress .navbar-nav > li.active > a:hover:after,
    .navbar-progress .navbar-nav > li.active > a:focus:after{
        border-left: 30px solid #428bca;
    }
    .navbar-progress .navbar-nav > li > a:hover:after,
    .navbar-progress .navbar-nav > li > a:focus:after {
        border-left: 30px solid #eee;
    }
    .navbar-progress .navbar-nav > li:first-child {
        margin-left: -50px;
    }
}
.navbar-progress .navbar-link {
    color: #777;
}
.navbar-progress .navbar-link:hover {
    color: #333;
}