The Most Popular Navigation Bars created with Flexbox
This is a simple but practical article. The aim is to build the navigation bars for facebook twitter github and medium with Flexbox. Facebook and Twitter are arguably the most popular websites in the world. Hence, the most popular navigation bars in the world :-)
Getting Started
The first step is to create some sort of container to house the navigation bars we will be making. When done, it should look like this:
Let’s get started.
First, create a basic html document to house the navigation bars.
<main>
<nav class="twitter">Twitter</nav>
<nav class="facebook">Facebook</nav>
<nav class="gitHub">Github</nav>
<nav class="medium">Medium</nav>
</main>Pretty simple. A main section to act as the container. The navigation bars will seat within their respective containers too.
Let’s add a bit of styling.
To keep the main section in the center of the page, do this:
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}Also, give main section a bit of style. No one loves ugly designs. Aaargh!
main {
min-height: 400px;
min-width: 400px;
background: #fff;
padding: 40px 20px;
border-radius: 5px;
box-shadow: 5px 55px 50px -20px #b6b6b6;
}And here’s what we have:
Yeah! Now we’ve got something on the screen.
Let’s start creating the first navigation bar, twitter!
Why Twitter first? Not Facebook? I have no legit reason. I just feel like :-) Or maybe because I haven’t used facebook in a long time!
The official Twitter navigation bar looks like this:
Let’s structure the html document for glory!
So, if I read your thoughts, this is how you think we’ll structure the document, right? Three div of some sort?
Hell no!
For simplicity, and to really take control of some flexbox goodies, I’ll use an unordered list ul. This means the nav tags will be changed to ul tags.
<ul class="twitter" role="navigation">
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>A list item li for each element within the navigation bar. I have gone ahead to add role=navigation for accesibility.
Flesh out the basic markup, like this:
<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><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>I know it looks complex, but it is a very simple document. A bunch of li tags with icons in i tags. These icons are got from font awesome. This will save us a lot of stress, and keep these examples simple.
At this point this is what you should have:
I have gone ahead to increase the width of the main section.
main {
width: 70%
}Now we can move on to some CSS goodness 😄
Clear the unneccessary spacing and list style from the unonderlist list:
ul {
padding: 0;
list-style: none;
}Now, the twitter navigation should seat on the same line as the rest of the contents in the container. Oh, and without the ugly list dots too.
Now, let’s get Flexbox unto the scene. Aye! Been waiting for this:
.twitter {
display: flex;
}
The sweet spot of this particular navigation comes next. How do you make sure the twitter bird (or whatever it is called) stays at the center?
Use Flexbox!
Target the list item containing the twitter bird. This is because the list li represents the flex-item
Give it a class so we can make reference to it via CSS.
<li class="twitter__bird"> ... </li>Now make magic!
.twitter__bird {
margin-left: auto;
margin-right: auto
}
Believe me, that is all the Flexbox you need. 3 lines of Flexbox!
If you aren’t familiar with the flexbox auto margin trick, i wrote an article that explains everything you need to know here.
If you clean up the UI a bit, you’ll have the navigation looking good. Just like this:
If you spend a lot more on styling the navigation bar, you will have it looking better.
Here’s the bit of “extra” styling I wrote:
Now let’s create the Facebook navigation bar. Let’s make Zuck happy.
The official navigation bar looks like this:
As always, start with a basic html document. An unordered list with a couple list elements.
Here is all the code at this point:
<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></li>
<li><i class="fa fa-bell-o"></i>Notifications</li>
<li>Home</li>
<li><i class="fa fa-user-circle-o"></i> Ohans</li>
<li><i class="fa fa-caret-down"></i></li>
</ul>Let’s style this.
As always, It all begins with a one liner:
.facebook {
display: flex
}
Target the facebook search form and get flexbox in action.
.facebook__search {
margin-right: auto;
}
Haha. That my dear is all the flexbox you need!
If you spend some more time, the UI will be polished. Something like this:
Here is all the “extra” styling I wrote:
Exercise
The entire code lives here: https://codepen.io/ohansemmanuel/full/KqEeor/
If you want to practice the concepts learned, I advice you try to build the navigation bars for Medium and Github. You’ll find it interesting.
Conclusion
I have been learning Spanish! So, I’ll say “thank you very much” in spanish
— muchas gracias
Thanks for following along.
Want to become Pro?
Download my free CSS Grid cheat sheet, and also get two quality interactive Flexbox courses for free!
