Responsive navbar using flex
A Pen by Furkan AKSOY on CodePen.
<header class="flex-navbar"> | |
<h1 class="brand">BRAND!</h1> | |
<ul class="items items-right"> | |
<li class="item"><a href="#">Home</a></li> | |
<li class="item"><a href="#">About</a></li> | |
<li class="item"><a href="#">Smth</a></li> | |
</ul> | |
</header> |
* { | |
box-sizing: border-box; | |
} | |
body { | |
margin: 0; | |
padding: 0; | |
font-family: Montserrat, sans-serif; | |
} | |
.flex-navbar { | |
background-color: ##FAFAFA; | |
box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24); | |
transition: all 0.3s cubic-bezier(.25,.8,.25,1); | |
padding: 2px 10px; | |
display: flex; | |
align-items: center; | |
} | |
.flex-navbar .items.items-right { | |
margin-left: auto; | |
} | |
.flex-navbar .brand { | |
color: #F9690E; | |
font-size: 1.45em; | |
} | |
.flex-navbar ul.items { | |
display: flex; | |
align-items: center; | |
list-style: none; | |
margin: 0; | |
padding: 0; | |
color: #34495e; | |
font-size: .99em; | |
text-transform: uppercase; | |
} | |
.flex-navbar > ul.items li.item { | |
margin: 0 15px; | |
} | |
.flex-navbar > ul.items li.item a { | |
text-decoration: none; | |
color: #616161; | |
} | |
.flex-navbar > ul.items li.item a:hover { | |
color: red; | |
} | |
@media only screen and (max-width: 577px) { | |
.flex-navbar { | |
flex-direction: column; | |
} | |
.flex-navbar ul.items { | |
flex-direction: column; | |
} | |
.flex-navbar ul.items.items-right { | |
margin-left: initial; | |
} | |
.flex-navbar > ul.items li.item { | |
margin: 15px 15px; | |
} | |
} |