Basic Side Navigation Bar using Vanilla CSS

After what simultaneously felt like two weeks, and two years, I finally graduated from Flatiron’s software engineering program, yay! As I began working on my resume, and everything else I needed to accomplish before I could officially begin my job search, I realized a couple of things: 1. The bootcamp was the easy part, and 2. There was still a lot I didn’t know, perhaps the most glaring of which was my inability to style anything using plain old vanilla CSS. As someone who had (not surprisingly) become quite fond of front-end development and design (I was a makeup artist in my past life), this realization was quite…..embarrassing. I’d spun up a fair few good-looking apps during my time at Flatiron, so what happened? CSS frameworks, that’s what happened. Now don’t get me wrong, CSS frameworks like Bootstrap are fantastic, especially if you’re looking to whip something up in a time crunch. Need a basic form? Copy and paste one of the pre-made components and watch the magic happen! But while that ‘magic’ makes it incredibly easy to quickly build out projects, it’s not clear exactly how that ‘magic’ is working, and relying solely on a framework can prevent you from learning basic CSS and HTML skills.

Recognizing that this was something I’d definitely need to know how to do at my future job, I decided to use only vanilla CSS for the new project I started. I set out to build my first component, a nav bar, and realized I didn’t know where to begin (a div maybe? Definitely a div.). So I thought I’d walk you through building your very own nav bar using vanilla CSS, in equal parts to help me re-solidify my learning, and hopefully teach you something too (it’s actually much easier than I initially thought it would be)! Before we begin, let me first say, as someone with limited CSS knowledge, working with vanilla CSS is infinitely more time consuming than working with a framework. Although as with anything, I imagine this will change as one becomes more proficient in it. That being said, frameworks often give website’s a certain… framework-y, generic feel, and you can often spot an app created using a framework from a mile away. Vanilla CSS provides you with the ability to truly customize your layouts and really make them your own in a way frameworks often can’t. Now on to the nav bar!

Spoiler alert, the final product will end up looking like this when we’re done

I’m using React for this project, so I’ll be working in the Navbar.js and App.css files. I had only used top nav bars in my previous projects, so I decided to switch it up and go with a side nav bar this time. I wanted a simple full height nav bar with an icon at the top and links below. I’m going to skip over actually creating the component since this blog is meant to focus on CSS, but the Navbar component is as follows:

A couple of things to note, I’m using an imported SVG from Undraw as the image source for the top icon, a few Font Awesome icons, and the React Router DOM Link component that has some default styling we’ll need to override. I’ve also given the <nav> tag a class name of “navbar” in anticipation of our styling. Because I’m using authentication in this app, I opted to create a function to determine which links to show based on whether or not a user is logged in, instead of including them directly within the <nav> tag. I did however put the icon image directly into the <nav> element, and above the linksToShow() function since we’ll be displaying the icon regardless of which links are being shown. Now that we have our nav bar set up, we need to style it. Let’s go over to our App.css file and break down exactly what we need to do. There are four components we’ll need to add styling to: the nav bar container, the links, the top icon image, and the font awesome SVG icons.

.navbar

It makes the most sense to start with our nav bar container, so let’s further break down what we’ll need to do here. We’ll need to set the following properties to achieve the look we’re going for: height, width, position, left, background, background-blend-mode, and padding-top.

height

Let’s first set our height. There are a number of units we can use to declare the height of an element using CSS. Since responsive design has become such an important focus when developing web apps, we want to try our best to declare lengths using units that will scale depending on the viewing device. One way to declare an element’s length relative to its parent element is to use %. Since we’re rendering our Navbar component in our App.js file, the parent element of our nav bar is our project’s outermost container. Setting our nav bar’s height to 100%, will ensure that it takes up the full height of this outer container, which also happens to take up the entire height of the screen.

width

The next thing we want to do is set our width. You can choose to make your nav bar as wide or narrow as you’d like, just make sure to always add a matching margin to your main content element. For example, if we have a left nav bar with a width of 160px, we want to make sure we set the left margin of our main content container to 160px so there’s no content overlap. While pixels are considered an absolute length unit in CSS, they are relative to the viewing device and therefore scale well. For this example, we’ll set our width to 160px, but you could just as easily set the width using % or vw units.

position

Next up is position, which specifies type of positioning method used for the element. By default, all HTML elements have a position of static which always positions an element according to the normal flow of the page, and isn’t positioned in any particular way. This won’t work for our nav bar since we want it to be in the same position regardless of what the other content on the page is doing. To achieve this we can set the position to fixed. This will ensure that our nav bar stays in the same place regardless of scrolling or content changes. This gives us access to the top, bottom, left, and right properties, which will further allow us to control the position of the nav bar. Since we’ve already set the height of our nav bar to be the full height of the screen, we don’t need to worry about the top or bottom properties, but to ensure our nav bar stays flush against the left of the screen, we can set the left property to 0. If you wanted to create a right side nav bar, you could set the right property instead.

background, background-blend-mode

For the background, I used the CSS properties of a gradient I found on Gradienta.io, which included values for the background and background-blend-mode.

padding-top

To offset the image icon so it’s not touching the top of our page, we can set the padding-top property to 20px. This will push down the inner content by 20px

That’s it for the nav bar container, next up are the links

.navbar a

The Link component that React Router DOM provides us is really just an <a> tag in disguise, so instead of giving each link a class name, we can select all <a> tags that are a descendent of our .navbar class.

text-decoration

First let’s get rid of the underline that the Link component gives us by default. This is easy enough to do, we can just set the text-decoration property to none.

display

Right now all of our links are on top of each other because <a> tags have a default display value of inline. To fix this we can change the display to block which will put them each on their own line so they appear to be in one column.

padding, margin

Next we can add some padding and margins to make the icons appear centered in the nav bar container. The padding will give us space between the <a> element and the link text inside of it, while the margin will give us space around the <a> element itself.

text-align, color

Lastly we can set the text-align property to justify to stretch/shrink the letter spacing so that all the links appear to be the same width. You can either leave the color of your text black, or change it using the color property. For this project we’ll set the color to be #3f3d56

All that’s left is to tweak our (currently massive) icon image, and SVG font awesome icons. We’ll again select img descendants of the .navbar class to style our icon image, and select SVG descendants of the .navbar class to style the font awesome icons.

.navbar img

height

The only thing we need to do here is resize our icon. We can do this by setting only the height property. This will ensure that the width of the icon is proportionately scaled down. Depending on source of your image, you’ll have to adjust this, but for this particular image, scaling it to 10% of it’s original height was the perfect size

.navbar svg

margin-right

Right now our font awesome icons are right up against our link text. All we need to do to fix this is add the margin-right property to all of the icons with a small 5px value.

Phew, now our CSS file should look like this (it includes an imported font that I’ll be using for the entire app, and the .App class that is created when you initialize a new React app with create-react-app):

That’s it! The above will give us the side bar shown at the top of this post. Feel free to play around and make it your own.