HTML Course | Creating Navigation Menu

A navigation menu is the first element we see in any website. It allows users to explore different pages and sections easily. In this chapter, you’ll learn how to create a navigation menu in HTML. 

In the last chapter, we have created the entire structure of our website using HTML elements and Tags. Let's now start building the website in parts.

The first part of the website is the header. So the first thing we will create is the navigation menu in the Header of the webpage.

The navigation bar contains:

• A logo aligned to the left.
• A menu of five items aligned to the right.

Steps To Create Navigation Menu

Step 1: The first task is to add the image for the logo.

Steps to include image and create logo: 

• Download image logo by clicking here.
• Copy and Paste the image to the directory: root/images. Where root is the top directory of our project. In our case it is named as "HTML Course".
• Include the image in the code using img tag.

<div id="logo">
 <img src="images/logo.png" />
</div>

Step 2: Create an unordered-list in HTML.

The second task is to create an unordered-list in HTML inside the navigation section of the header menu 

• Add an unordered list in the navigation menu section with 5 list-items named "Home", "About Us", "Our Products", "Careers", and "Contact Us".
• The code of the Header section after adding the above two things will look like as shown below:

If you now open the index.html file in a browser, you will see the below output:

This looks very different than what we saw in the screenshots of the final project. This is because our website is missing CSS for now. That is we have just created the structure of the navigation bar, to make it look beautiful, we will have to add styles using CSS.

We will design the navigation bar later but first create a file named "style.css" and add it to the folder "HTML-Course/CSS". Also include the CSS file created to the "index.html" file by adding the below line in between head tags.  

<link rel="stylesheet" href="CSS/style.css">

Before we begin styling the navigation menu, the first thing needed to do is to set the default CSS values for the HTML elements. Copy and Paste the below code in your "style.css" file.

As you can see in the above CSS that we have set the default values for almost every useful HTML element required for the project. Also, we have created a CSS class named "container". This basically defines a container with a width of 1200px and all of the text within it aligned to center. Add this class named container to the <header> tag.

The next step is to assign some id's to our HTML elements and then use those id's in the CSS file to style them. Here, we already have assigned id's to the HTML elements as you can see in the above code. Let's just begin adding styles to them.

Style the Navigation Bar

Step 1: Styling overall Header

There isn't much styling needed for the header tag. The header tag is just needed to be set to "overflow: hidden" to prevent window from overflowing on browser resize. 

Step 2: Styling Navigation Bar(#top-header)

Set a fixed height of 60px for the navigation bar and align the texts to center. 

Step 3: Styling Logo(#logo)

Remove padding from the parent div of logo. Make both parent and image floated towards left and assign widths to them. 

Step 4: Styling Navigation Menu(#menu)

The overall CSS code combining all of the above class and id's for the navigation bar is shown below and also you can check the output by running the below file:  

So, we have successfully created the navigation bar for the header of our Website. The next thing is to insert the image and a text over the image just below the navigation bar in the header.