Building our Navigation w/ Flexbox - Day 17

I had to look this one up before proclaiming it…while some cultures read & write from left to right and others from right to left, they all start from the top and work their way down the page. That is why the top navigation bar is one of the most important features of a website as it is typically the first thing people see from your website. It’s important to be clear and concise while creating your web content as a user should be able to understand at a basic level of what your website/service can provide within the first glance.

This is where more is NOT always better. Having an inception type situation of nested menus within menus within menus is just confusing as a user and most of the time completely unnecessary. Almost every client I have ever had (even myself at times) tries to pack as much as possible inside such a small screen only to realize months later that no one clicks on that shit! Don’t waste your time!

I think a good rule of thumb when deciding on menu items is that if you can’t fit it on a phone screen menu without scrolling and making the text super tiny, it’s not necessary. Especially since more than half of your traffic usually comes from mobile anyway so you should be optimizing for less screen space than a desktop computer.

I Love Flexbox

It actually used to be a pain in the arse.. before flexbox to align items correctly in a navigation bar trying to get the spacing right vertically and horizontally with the right padding and margin. But now it’s a breeze, check out the easiest possible navigation bar below:

index.html

<nav>
	<a href="/">
		<img src="./img/company-logo-here.jpg">
	</a>
	<a href="/">Home</a>
	<a href="/about">About</a>
	<a href="/cart">Cart</a>
</nav>

styles.css

nav {
	display: flex; /* Required */
	justify-content: space-around; /* Align items horizontally */
	align-items: center; /* Align items vertically */
	height: 65px; 
	position: fixed; 
	width: 100%; 
	background-color: #fff;
}

With this configuration, all of the links are equally spaced from each other both vertically and horizontally which is amazing! And then we have position:fixed; this allows the navbar to follow the user as they scroll down the screen. You can also change that to position: absolute if you want the navbar to stay on the top so it goes out of view as they scroll down.

Readability

Since this is so easy to read and understand, it’s simple to customize it as much or as little as you’d like for maximum flexibility. With this it will allow us to create an awesome dropdown mobile menu in tomorrow’s episode!

Conclusion

Check out the video below for a more in-depth overview for the Zero to Startup in 30 Days Challenge.

Building our Navigation w/ Flexbox

Coming Tomorrow -----> Creating a Mobile Nav w/ Javascript

Want To Learn How To Turn Your Ideas Into Code?


Written by Tim Moreton who lives and works
in Philadelphia building useful things.