The Most Popular Navigation Bars created with Flexbox

index.html

<main>
  <ul class="twitter" role="navigation">
    <li><i class="fa fa-home"></i>Home</li>
    <li><i class="fa fa-bell-o"></i>Notifications</li>
    <li><i class="fa fa-envelope-o"></i>Messages</li>
    <li class="twitter__bird"><i class="fa fa-twitter"></i></li>
    <li><form><input placeholder="search twitter"/><i class="fa fa-search"></i></form></li>
    <li><i class="fa fa-user-circle-o"></i></li>
    <li><button>tweet</button></li>
  </ul>
  
  
  <!--facebbok-->
  <ul class="facebook" role="navigation">
    <li class="facebook__brand"><i class="fa fa-facebook-official"></i></li>  
    <li class="facebook__search"><form><input placeholder="search facebook"/><i class="fa fa-search"></i></form></li>
    <li><i class="fa fa-user-circle-o"></i> Ohans</li>
    <li>Notifications</li>
    <li>Home</li>
    <li><i class="fa fa-caret-down"></i></li> 
  </ul>
<!--   <nav>Github</nav>
  <nav>Medium</nav> -->
</main>

script.js

/*
 I hope this "over-commenting helps ya! 
 
 Curious how I built this? Read the article here => => => https://medium.com/flexbox-and-grids/the-most-popular-navigation-bars-created-with-flexbox-6c0f59f55686
 
 1. For simplicity, I am using font awesome. Thus, some icons may not be the exact same ones you see on twitter/facebook/github/medium
 
 2. For simplicity, I have also avoided mobile displays of these navigation bars. Feel free to fork and do for mobile. It'll be fun :-) 
*/

style.css

body {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

main {
    min-height: 400px;
    width: 70%;
    min-width: 600px;
    background: #fff;
    padding: 40px 20px;
    border-radius: 5px;
    box-shadow: 5px 55px 50px -20px #b6b6b6; 
}

ul {
  padding: 0;
  list-style: none;
}


/* ============================
    Twitter
   ============================
*/

.twitter {
  display: flex;
}

.twitter__bird {
  margin-left: auto;
  margin-right: auto/*this will push aside the other flex-items and the bird takes the remaining space!*/
} 

/*
  UI cleanups for the twitter navigation. This just makes things look good on the eye 😎
*/

.twitter {
  border: 1px solid red;
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  color: rgba(117,117,117 ,1);
  box-shadow: 5px 10px 20px -20px rgba(85,172,238 ,1);
}
.twitter li {
  cursor: pointer;
}
.twitter li:hover{
  color: rgba(85,172,238 ,1);
}
.twitter__bird {
  color: rgba(85,172,238 ,1);
  font-size: 1.3em;
}
.twitter li:not(:last-child):not(.twitter__bird) {
  margin-right: 10px;
}
.twitter li  i:not(.fa-twitter):not(.fa-search):not(.fa-user-circle-o) {
  margin-right: 3px;
}
.twitter li > button {
  font-size: 0.8em;
  border: 0;
  background: rgba(85,172,238 ,1);
  color: #fff;
  border-radius: 100px;
}





/* ============================
    Facebook
   ============================
*/
.facebook {
  display: flex;
}

.facebook__search {
  margin-right: auto;
}
/*
  UI cleanups for the facebook navigation. Let's make facebook great again :-) 
*/
.facebook {
  border: 1px solid red;
  height: 46px;
  align-items: center;
  padding: 0 10px;
  border: 1px solid rgba(238,238,238 ,1);
  border-radius: 5px;
  background: rgba(59,89,153 ,1);
  color: #fff;
  font-size: 0.9em;
  box-shadow: 5px 10px 20px -20px rgba(59,89,153 ,1)
}

.facebook__brand  i{
  font-size: 1.5em;
}
.facebook li:not(:last-child):not(:first-child):not(.facebook__search) {
  margin-right: 10px;
}

styles

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />

the-most-popular-navigation-bars-created-with-flexbox.markdown

The Most Popular Navigation Bars created with Flexbox

Curious how I built this? Read the article here => => => https://medium.com/flexbox-and-grids/the-most-popular-navigation-bars-created-with-flexbox-6c0f59f55686

A Pen by Ohans Emmanuel on CodePen.

License.