Bootstrap 3 Tree NAV

by vanburen

HTML

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<nav class="navbar navbar-default">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target=".navbar-collapse" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

        </button> <a class="navbar-brand" href="/hug/">Hug a Tree</a>

    </div>
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-right">
            <li><a href="{% url 'about' %}">about</a>

            </li>
            <li><a href="{% url 'profile' %}">profile</a>

            </li>
            <li><a href="{% url 'favourites' %}" class="fav">f<span style="color:#e48666">a</span>vourites</a>

            </li>
            <li><a href="{% url 'logout' %}">logout</a>

            </li>
            <li><a href="{% url 'register' %}">register</a>

            </li>
            <li><a href="{% url 'login' %}">login</a>

            </li>
        </ul>
    </div>
</nav>
<div class="wrapper">
    <div class="well"> <a href="http://getbootstrap.com//">Bootstrap 3</a> 
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultrices enim id tortor tincidunt, eget mollis mauris gravida. Mauris sem leo, feugiat ut felis blandit, imperdiet egestas orci. Proin lacinia at massa fermentum facilisis. Donec laoreet facilisis nunc, sed posuere magna rhoncus sed. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent augue ipsum, rhoncus vel tempus sed, vehicula non purus. Nunc sit amet consectetur risus. Integer eget justo ut sapien consectetur auctor id eu augue. Quisque ac elit congue, eleifend...

CSS

.navbar {
    background-color: #fff;
    border: 1px solid #e9e7b6;
    margin: 25px;
    height: 100px;
    font-family:'Raleway', sans-serif;
    color: #5aa47d;
    padding-top: 0px;
}
.navbar .navbar-collapse {
    background-color: #fff;
    color: #5aa47d;
    margin: 25px 0px;
    text-align: right;
    border: none;
}
.navbar .navbar-toggle {
    margin-top: 35px;
}
.navbar-default .navbar-brand {
    font-family:'Oswald', sans-serif;
    float: left;
    color: #426085;
    padding: 35px 15px 0px 25px;
    height: 50px;
    font-size: 30px;
    line-height: 25px
}
.navbar-nav > li > a {
    font-size: 16px;
    color: #5c606b;
}
.navbar-default .navbar-brand:focus, .navbar-default .navbar-brand:hover {
    color: #5aa47d;
}
.navbar .navbar-nav > .active > a,
.navbar .navbar-nav > .active > a:hover,
.navbar .navbar-nav > .active > a:focus {
    font-family:'Raleway', sans-serif;
    color: #5aa47d;
}
.navbar .navbar-nav > .open > a,
.navbar .navbar-nav > .open > a:hover,
.navbar .navbar-nav > .open > a:focus {
    font-family:'Raleway', sans-serif;
    color: #5aa47d;
}
.navbar .navbar-nav > li > a:hover,
.navbar .navbar-nav > li > a:focus,
.navbar .navbar-nav > li > a:active {
    font-family:'Raleway', sans-serif;
    color: #5aa47d;
}
@media (max-width: 768px) {
    .navbar-nav > li > a {
        padding: 20px 30px 20px 0px;
    }
}
.wrapper {
    height: auto;
    background-color: #fff;
    margin-top: 0px;
    padding: 10px 20px;
}
.well {
    background-color: transparent;
    border: 3px solid #428bca;
    border-radius: 0px;
    text-align: center;
    font-size: 25px;
}