The Most Popular Navigation Bars created with Flexbox

Ohans Emmanuel
Jul 15, 2017 · 5 min read

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.

Twitter

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:

Facebook

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!

Get them now

Flexbox and Grid

Want to master Flexbox or the CSS Grid? Get in Line!

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store