Flex-Navbar

flex-navbar.markdown

Flex-Navbar

Responsive navbar using flex

A Pen by Furkan AKSOY on CodePen.

License.

index.html

<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>

style.css

* {
  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;
  }
  
}