Complete Web Designing Course for Beginners

Lesson 5.5 – Responsive Navigation Bar

🌐 Building Mobile-Friendly Navigation Menus for Modern Websites

🎯 Learning Objectives

After completing this lesson, students will be able to:

✅ Understand Navigation Bars

✅ Create Responsive Menus

✅ Build Mobile-Friendly Navigation

✅ Use Flexbox in Navigation

✅ Apply Media Queries to Menus

✅ Create Professional Website Headers

✅ Build Modern Responsive Websites

📖 Introduction

Every website contains a navigation menu.

Examples:

YouTube

Home  Shorts  Subscriptions

Amazon

Home  Products  Cart  Orders

College Website

Home  About  Courses  Contact

Navigation helps users move between pages.

Without navigation:

❌ Difficult to browse website

❌ Poor user experience

❌ Unprofessional design

🤔 What is a Navigation Bar?

A Navigation Bar (Navbar) is a section that contains website links.

Example:

LOGO

Home  About  Courses  Contact

Users click links to visit different pages.

🌟 Why Responsive Navigation is Important?

Desktop Screen:

Home About Courses Gallery Contact

Looks good.

Mobile Screen:

Home About Courses Gallery Contact

May become crowded.

Responsive Navigation automatically adjusts for different screen sizes.

🎯 Navigation Structure

A navigation bar usually contains:

✅ Logo

✅ Menu Links

✅ Login Button (Optional)

✅ Search Bar (Optional)

Example:

LOGO

Home About Services Contact

🌟 Creating a Simple Navigation Bar

HTML

<nav>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Courses</a>

<a href="#">Contact</a>

</nav>

Output:

Home

About

Courses

Contact

Links appear vertically.

🎯 Styling Navigation with Flexbox

CSS

nav{

display:flex;

gap:20px;

}

Output:

Home About Courses Contact

Now links appear horizontally.

🌟 Adding Background Color

nav{

display:flex;

gap:20px;

background-color:#0d6efd;

padding:15px;

}

Result:

Blue navigation bar.

🎯 Styling Navigation Links

nav a{

color:white;

text-decoration:none;

font-size:18px;

}

Result:

Professional white menu links.

🌟 Hover Effect

When user moves mouse over links.

nav a:hover{

color:yellow;

}

Result:

Menu becomes interactive.

🎯 Creating a Logo

HTML

<nav>

<h2>NextGen Dev Hub</h2>

<div>

<a href="#">Home</a>

<a href="#">About</a>

<a href="#">Courses</a>

<a href="#">Contact</a>

</div>

</nav>

CSS

nav{

display:flex;

justify-content:space-between;

align-items:center;

}

Output:

NextGen Dev Hub

Home About Courses Contact

Professional navbar.

🌟 Complete Desktop Navigation

HTML

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

CSS

nav{

display:flex;

justify-content:space-between;

align-items:center;

background-color:#0d6efd;

padding:15px 30px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

}

Output

NextGen Dev Hub

Home About Courses Contact

🎯 Making Navigation Responsive

Desktop:

Home About Courses Contact

Mobile:

Home

About

Courses

Contact

Use Media Queries.

🌟 Responsive Navigation CSS

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

}

Mobile Output

NextGen Dev Hub

Home

About

Courses

Contact

Perfect for mobile users.

🎯 Complete Responsive Navbar

HTML

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Projects</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

CSS

body{

margin:0;

font-family:Arial;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

background-color:#0d6efd;

padding:15px 30px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

nav a:hover{

color:yellow;

}

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

}

🎯 Understanding Hamburger Menu

Modern websites often use:

☰

called:

🍔 Hamburger Menu

Example:

Desktop:

Home About Courses Contact

Mobile:

☰

Tap menu to open links.

Popular websites:

✅ YouTube

✅ Amazon

✅ Facebook

✅ Instagram

Use hamburger menus.

🌟 Simple Hamburger Button Example

HTML

<button>

☰

</button>

CSS

button{

font-size:30px;

}

Displays:

☰

In advanced projects, JavaScript is used to open and close menus.

🎯 Responsive Navigation Layout

Desktop:

---------------------------------

LOGO

HOME ABOUT COURSES CONTACT

---------------------------------

Mobile:

----------------

LOGO

☰

----------------

Menu appears after clicking button.

💻 Complete Practical Program

HTML

<!DOCTYPE html>

<html>

<head>

<title>Responsive Navbar</title>

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

</head>

<body>

<nav>

<h2>NextGen Dev Hub</h2>

<ul>

<li><a href="#">Home</a></li>

<li><a href="#">About</a></li>

<li><a href="#">Courses</a></li>

<li><a href="#">Projects</a></li>

<li><a href="#">Contact</a></li>

</ul>

</nav>

</body>

</html>

CSS

body{

margin:0;

font-family:Arial;

}

nav{

display:flex;

justify-content:space-between;

align-items:center;

background-color:#0d6efd;

padding:15px 30px;

}

nav h2{

color:white;

}

nav ul{

display:flex;

gap:20px;

list-style:none;

}

nav a{

color:white;

text-decoration:none;

font-weight:bold;

}

nav a:hover{

color:yellow;

}

@media (max-width:768px)
{

nav{

flex-direction:column;

}

nav ul{

flex-direction:column;

padding:0;

}

}

🎯 Expected Output

Desktop:

✅ Horizontal Menu

✅ Professional Layout

Mobile:

✅ Vertical Menu

✅ Easy Navigation

🏫 Real World Examples

College Website

Responsive Navigation

E-Commerce Website

Responsive Navigation

Portfolio Website

Responsive Navigation

Business Website

Responsive Navigation

Learning Management System

Responsive Navigation

⚠️ Common Beginner Mistakes

Mistake 1

Not Using Flexbox

Menu alignment becomes difficult.

Mistake 2

Forgetting Media Queries

Menu breaks on mobile.

Mistake 3

Using Very Small Text

Wrong:

font-size:10px;

Better:

font-size:16px;

or larger.

🌟 Best Practices

✅ Use Flexbox.

✅ Use Media Queries.

✅ Keep navigation simple.

✅ Use hover effects.

✅ Make menus mobile friendly.

🏆 Mini Project – College Navigation Bar

Create a navbar containing:

College Logo

Home

About

Departments

Courses

Contact

Requirements:

✅ Blue Background

✅ White Text

✅ Flexbox Layout

✅ Responsive Design

📝 Practical Activity

Create:

Polytechnic College Navbar

Desktop:

Home About Courses Faculty Contact

Mobile:

Home

About

Courses

Faculty

Contact

Using Media Queries.

📋 Assignment

Assignment 5.5

What is a Navigation Bar?
Why is Responsive Navigation important?
What is Flexbox used for in navigation?
What is a Hamburger Menu?
Create a responsive navbar.
Add hover effects to menu links.
Explain how Media Queries help navigation menus.

🧠 Quiz

Q1. What is a Navigation Bar?

A. Image

B. Menu Section

C. Database

D. Server

✅ Answer: B

Q2. Which CSS property is commonly used for navigation layout?

A. display:flex

B. color

C. margin

D. border

✅ Answer: A

Q3. Which symbol represents a Hamburger Menu?

A. ★

B. ►

C. ☰

D. ✓

✅ Answer: C

Q4. Which CSS feature helps make navigation responsive?

A. Animation

B. Media Queries

C. Borders

D. Images

✅ Answer: B

Q5. Responsive Navigation improves?

A. User Experience

B. Accessibility

C. Mobile Friendliness

D. All of These

✅ Answer: D

📌 Lesson Summary

✅ Navigation Bars help users move between website pages.

✅ Flexbox is commonly used to create navigation layouts.

✅ Media Queries help navigation adapt to different screen sizes.

✅ Responsive Navigation is essential for modern websites.

✅ Hamburger Menus are commonly used on mobile devices.