SimpleTuts.com
Login Register

Creating a Header with Navigation Menu

Previous Next

Build a Website Header with Navigation and Multiple Pages

In this chapter, students learn how to create a website header (navbar) with a logo, navigation links, hover effects, and an external CSS file. They also learn how to link multiple pages like Home and About.

Chapter Goal

What is a Header / Navbar?

A header (also called a navbar) appears at the top of a website and usually contains:

It helps users move between different pages of the website.

Step 1: Create HTML Structure (Home Page)

Create a file named index.html.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Home page</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>

<header>
    <div class="logo-box">
        <img src="logo.png" alt="" id="logo-image">
    </div>

    <div class="links-box">
        <ul>
            <li><a href="index.html">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Products</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </div>
</header>

<div id="hero">
    <h1>Welcome to ABC Interiors</h1>
    <p>Let's create your perfect home</p>
</div>

</body>
</html>
Run Code

Step 2: Create External CSS File

Create a file named styles.css.


body{
    margin:0px;
}

/* header */
header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:0px 50px;
}

img#logo-image{
    height:100px;
}

.links-box ul{
    display:flex;
    list-style-type:none;
    gap:30px;
}

.links-box ul li a{
    text-decoration:none;
    color:black;
}

.links-box ul li a:hover{
    color:blue;
    text-decoration:underline;
}

/* hero section */
#hero{
    background-color:dodgerblue;
    color:white;
    padding:50px;
}
Run Code

This is the first time we are using an external CSS file.

Step 3: Create About Page

Create a new file named about.html.


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>About page</title>
</head>
<body>
    <h1>About Us</h1>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit.
       Reprehenderit error aliquid ullam delectus quod nulla odio,
       iure deserunt quaerat dicta iste, illum debitis repellendus
       mollitia! Vel fuga aperiam in autem!</p>
</body>
</html>
Run Code

How Navigation Works

Beginner Notes

Practice Task

  1. Change link colors
  2. Add a new menu item
  3. Increase logo size

Chapter Summary

Watch video

Previous Next