New Navigation

by nathanziarek

HTML

<link rel="stylesheet" href="https://s3.amazonaws.com/DSUEL/dev/styles/duel.css">
<nav class="navbar">
    <div class="container">
        <div class="container-wrapper">
            <div class="container-full-column">
                <div class="flex">
                    <input type='search' />
                </div>
                <div class="">Product Catalog</div>
                <div class="">Order History</div>
                <div class="">Shopping Lists</div>
                <div class="">Cart</div>
            </div>
        </div>
    </div>
</nav>

CSS

nav { height: 45px; min-height: auto }

nav .container-full-column {
    display: table;
    height: 45px;
}

nav .container-full-column div {
    display: table-cell;
    white-space: nowrap;
    width: 1%;
    padding: 0 20px;
    vertical-align: middle;
}

nav .container-full-column div.flex {
    width: 100%;
}

nav .container-full-column div input {
    width: 100%;
}

/*nav {
    display: table;
    width: 960px;
    font-family: Open Sans;
    background: #336699;
    color: white;
    margin: auto;
}
div {
    width: 1%;
    display: table-cell;
    white-space: nowrap;
    padding: 0 20px;
    height: 40px;
    vertical-align: middle;
    border-right: #4477aa 1px solid;
    border-left: #225588 1px solid;
}
div.flex {
    width: 100%
}
input {
    width: 100%
}*/