Bootstrap Collapsible Dropdown Navigation

Header navigation without using Bootstrap's default navbar. Uses .dropdown for the actual menu instead.

HTML

<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div id="header" class="clearfix">
    <div class="header-left">
        <div id="brand">
            <h2>Coolness</h2>
        </div>
        <div class="dropdown">
            <button type="" class="dropdown-toggle glyphicon glyphicon-arrow-down " data-toggle="dropdown">
                <span class="sr-only">Toggle navigation</span>
                <span class="" aria-hidden="true"></span>
            </button>
            <ul id="nav-area-collapse" class="dropdown-menu list-reset" role="menu">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
            </ul>
        </div>
        <div class="header-left">
        <div id="brand">
            <h2>Coolness</h2>
        </div>
        <div class="dropdown">
            <button type="" class="dropdown-toggle glyphicon glyphicon-arrow-down " data-toggle="dropdown">
                <span class="sr-only">Toggle navigation</span>
                <span class="" aria-hidden="true"></span>
            </button>
            <ul id="nav-area-collapse" class="dropdown-menu list-reset" role="menu">
                <li>
                    <a href="#">Dashboard</a>
                </li>
                <li>
                    <a href="#">Blog</a>
                </li>
            </ul>
        </div>
    </div>
    </div>
    <div class="header-right">
        <div class="dropdown">
            <button type="button" class="dropdown-toggle visible-xs" data-toggle="dropdown">
                <span class="sr-only">Toggle navigation</span>
                <span class="fa fa-lock" aria-hidden="true"></span>
            </button>
    ...

SCSS

@import url(http://fonts.googleapis.com/css?family=Lobster+Two:700);

body {
    margin: 0;
    background: #f0f0f0;
}
#header {
    border-bottom: 1px solid #ececec;
    min-height: 50px;
    background: white;
    #brand {
        width: 100%;
        text-align: center;
        position: absolute;
        margin-top: 10px;
        h2 {
            font-size: 1.7em;
            font-family: 'Lobster Two', cursive;
            margin: 0;
        }            
    }
    .dropdown {
        float: left;
        button.dropdown-toggle {
            border: 0;
            background: transparent;
            padding: 15px;
            width: 50px;
            text-align: center;
            position: relative;
            border-right: 1px solid #ececec;
            /* Create a border at the bottom to cover the border of the dropdown */
            &:after {
                content: '';
                display: block;
                position: absolute;
                bottom: -1px;
                left: 0;
                width: 100%;
                background-color: transparent;
                height: 1px;
                z-index: 1010;
            }
            .fa {
                font-size: 1.25em;   
            }
        }
        ul {
            box-shadow: none;
            margin: 0;
            padding: 0;
            border-color: #ececec;
            border-radius: 0;
            > li {
                > a {
                    padding: 15px 20px;   
                }
            }
        }
        
        /* Dropdown Open */
        &.open {
            button.dropdown-toggle {
                .fa {
                    color: #ef0d48;
                }
                &:after {
                    background-color: white;
                }
            }
        }
    }
    .header-left {
        .dropdown {
            button.dropdown-toggle {
                border-right: 1px solid transparent;
            }
        }
    }
    .header-right {
 ...