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 get started
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)
Step 0: The <head>
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.
Step 1: Navbar HTML
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 <ul>. Using <a href> tags, we place our links within an <li>.
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.
Step 2: <header> CSS
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.
Step 3: <ul> CSS
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.
Step 4: <li> CSS
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 font-family property.
We’re getting a lot closer to our end goal. With just a little more CSS, we’ll be there!
Step 5: #title CSS
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.
Step 6: <a href> CSS
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.
Step 7: Remove default margin with CSS
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.
Conclusion
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.
Top comments (8)
Awesome article, love how detailed it is. Hope it helps many people who are new to HTML & CSS!
The following is more for the readers rather than you (as I'm sure you already know):
Step 7 shows how to remove the default margin. If you are working on a production site, this is ideally done in a global style separate from pages or component styles (eg. your navbar or layout styles). Why? Because if you have reset styles in (eg.) the navbar code and the navbar is removed/replaced/not used, the reset styles may get accidentally removed and may break other parts of the site. 😵
Some popular CSS reset/normalize styles are discussed here: css-tricks.com/reboot-resets-reaso...
Thank you!! And thanks for the addition. I'm sure a lot of readers will find this useful😃
Very good tutorial. One suggestion: content providers do not want all their < li > fields to be reformatted as described in the css file. Therefore, I suggest you add something like < DIV id="nav_li" > to treat the navigational list items differently than other list items in the document.
Ceora thank you for this. It’s great to see each little step and the thinking behind it. Love the inclusion of the code pens.
I’m so glad you enjoyed this Andrei! Thanks for reading and leaving feedback!
She pointed out that it’s not responsive yet
In my next post, I’m going to point out how we can fix that using responsive design principles. So stay tuned!