Code a Responsive Navbar with HTML and CSS Flexbox (2 Part Series)
This post was originally featured on debugacademy.com.
Navigation bars are one of the main components of a website. That’s where the important things are that help people navigate your site (hence the name). That being said, they can be pretty intimidating for beginners.
Not too long ago, we created a navbar as part of my Debug Academy class. In all honesty, that wasn’t too difficult for me. Then we had to make it responsive. And… I literally hated it. I understand why responsive design is so important but actually making a website responsive can be a real pain.
But, as I said earlier, it’s important that all websites be responsive. You will have users visiting your site from both desktop computers and mobile phones. And the number of mobile users is steadily increasing. So, as a web developer, it’s your job to make sure that your website looks good no matter what device your audience is using.
So let’s start at the very top of our webpage by creating a responsive navbar. For now, we will just code the navbar. In my next post, I’ll walk you through the process of making your navbar responsive.
Before we start coding, there are a few things you need to know. You will need to have a decent understanding of HTML. If you’re an absolute beginner, no need to fear. I recently wrote a comprehensive guide to HTML. So you can check that out before you begin creating your navbar with me.
Here are some other things you’ll need:
•A Text Editor or Codepen
•A desire to learn
•Some CSS experience (not absolutely necessary)
Most of this should be familiar to you, especially if you’ve already read my HTML 101 post. This is how every HTML document is started off. The
<title> tag might be something new to you. Since it’s placed within our
<head>, our users are not able to see this
<title> on their screen. But their browser does display it on the page tab.
Now it’s time to add the HTML for the navbar.
The main attraction in this section is the
<nav>. This is the HTML element that stores our navigation links. We then create a list within our
<nav>using an unordered list aka a
<a href> tags, we place our links within an
As you can see below, I just used “Tab” as a placeholder for my menu items. But you can put whatever you like here. Go crazy. I’ve also given the title of our page (“Nav Bar Tutorial” )an id set equal to “title”. This is for use later on in our CSS.
At this point, it’s pretty far from what our end goal is. That’s where CSS comes in.
First, let’s start by giving our navigation bar background color. We use the
background-color property to do this. You can use Hex Color Codes to help choose any color you like to define this property. If you don’t feel like a hex color, you can just type in the name of a basic color like red or blue.
Now we’re going to define the dimensions of our navbar. We want it to stretch all the way across our browser horizontally. We’ll accomplish this by setting our width to 100%. I also set the height to 60px.
As you can see, there’s still some progress to be made so let’s keep working.
We don’t want our menu items to be stacked on top of each other like that. There are many ways we can fix this. But I find the simplest way is by changing our display to flex. Without defining this property,
display defaults to block. This is why the list items are all stacked up on top of each other like blocks. Using
display: flex instead will make them align horizontally the way we want. Using the keyword flex implements a special style of CSS called Flexbox. I won’t get into detail about that right now. But if you would like to learn more about Flexbox you can check out this article from CSS-Tricks.
We also want to get rid of those bullet points. We use the
list-style-type property set to none to do this. We can increase the font-size of our menu items so that users can read them more easily. The
font-size allows us to do this. I set my
font-size to 20px. You can use a different value if you like. Just keep in mind that the value needs to be in pixels aka px.
I want every
<li> to be pushed to the right side of the navbar. I can do this by using a Flexbox property called
justify-content. We’re going to give this the value of
flex-end. This will move all
<li> elements to the right (or end) of our navbar.
All of our
<li> elements are scrunched up together. They need some space. To do this we use the
margin property. Setting this to 20px puts 20 pixels of space to the left, right, top, and bottom of each
<li> element. Again, if you would like them to be closer or farther apart, you can change the number of pixels to whatever figure you want. I also decided to change the font to Arial. We can do this with the
We’re getting a lot closer to our end goal. With just a little more CSS, we’ll be there!
I like it when the title of the page is set to the left on the navigation bar. We can do that by changing the right margin of our title. This is where the title id we made in our HTML comes in. With this id, we can apply CSS to just our page title. Using a hashtag, we can call on our title id in our CSS. We now add the
margin-right property set to auto to move our title to the left side of our navigation bar.
As you can see, our links are all blue. I don’t know about you, but I’m not in love with how that looks. So I’m going to target the anchor tags within our li using the code to follow. I’m going to set the color to black and using the
text-decoration property, I’m going to remove the underline with none.
We want the user to know that our list items are links. The way we can do this is by adding a property for when a user hovers over our list items. This is done using the
:hover selector. We’re going to use the
text-decoration property again, setting it to underline this time. This code will underline our list items whenever the user hovers over them.
You can try this out yourself.
We are so close to completing our navigation bar! One thing that really bothers me is the white space around our navbar. As a beginner, I could never figure out why there always seemed to be some white space sitting around the content I had coded. Turns out, browsers add a bit of margin to our
<body> by default. Many other HTML elements also have a default margin.
This is why our navbar has so much space around it. Thankfully, it’s very easy to remove this space. We have to set the
margin of our body to 0 pixels. We also have a default margin for our ul. Again, we fix this by setting the
margin of our ul to 0px.
This is our final product.
It looks really great. But, we still have some work to do. Our navigation bar isn't responsive just yet. In my next post, we'll go through the step-by-step process of making our navbar responsive.
As always, please feel free to leave any additional comments or feedback below. I always appreciate it.