April 10, 2026

Design a Responsive Navbar and Footer using Static CSS

📌 Introduction

A professional website always has:

✅ Navbar (top navigation)
✅ Footer (bottom section)

👉 We design them using static CSS and reuse across pages.

🎯 Program Statement

👉 Design a responsive navbar and footer using static CSS.

🧠 Concept

👉 We will:

Create CSS file
Create navbar + footer
Use static + reusable structure

⚙️ Step 1: Static Folder Structure

📁 Project Structure:

myproject/
    static/
        css/
            style.css

⚙️ Step 2: Create CSS File

📁 File: `style.css`

🔹 Path:

myproject/static/css/style.css

🔹 Code:

/* Navbar */
.navbar {
    background-color: #333;
    overflow: hidden;
}

.navbar a {
    float: left;
    color: white;
    padding: 14px 20px;
    text-decoration: none;
}

.navbar a:hover {
    background-color: #575757;
}

/* Footer */
.footer {
    background-color: #333;
    color: white;
    text-align: center;
    padding: 10px;
    position: fixed;
    bottom: 0;
    width: 100%;
}

/* Responsive */
@media screen and (max-width: 600px) {
    .navbar a {
        float: none;
        display: block;
        text-align: center;
    }
}

⚙️ Step 3: Create Template

📁 File: `layout.html`

🔹 Path:

myproject/templates/layout.html

🔹 Code:

{% load static %}

<!DOCTYPE html>
<html>
<head>
    <title>Navbar & Footer</title>

    <link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
<body>

    <!-- Navbar -->
    <div class="navbar">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Contact</a>
    </div>

    <!-- Content -->
    <div style="padding:20px;">
        <h1>Welcome Page</h1>
        <p>This page contains a responsive navbar and footer.</p>
    </div>

    <!-- Footer -->
    <div class="footer">
        <p>© 2026 My Website | All Rights Reserved</p>
    </div>

</body>
</html>

⚙️ Step 4: Create View

📁 File: `views.py`

🔹 Path:

myproject/myapp/views.py

🔹 Code:

from django.shortcuts import render

def layout_page(request):
    return render(request, 'layout.html')

⚙️ Step 5: URL Mapping

📁 File: `urls.py`

🔹 Path:

myproject/myproject/urls.py

🔹 Code:

from django.contrib import admin
from django.urls import path
from myapp import views

urlpatterns = [
    path('admin/', admin.site.urls),
    path('layout/', views.layout_page),
]

⚙️ Step 6: Run Server

python manage.py runserver

🌐 Step 7: Output

👉 http://127.0.0.1:8000/layout/

✅ Output Features:

Top navigation bar
Responsive links
Fixed footer
Clean layout

🧠 How It Works

Navbar

<div class="navbar">

👉 Contains navigation links

Footer

<div class="footer">

👉 Fixed at bottom

Responsive CSS

@media screen and (max-width: 600px)

👉 Adjusts layout for mobile

🔥 Key Concepts

Component	Purpose
Navbar	Navigation
Footer	Information
CSS	Styling
Media Query	Responsiveness

⚠️ Common Errors

❌ Forgot `{% load static %}`

👉 CSS will not apply

❌ Wrong CSS path

👉 Must be:

{% static 'css/style.css' %}

❌ Footer overlapping content

👉 Add spacing if needed

❌ Links not working

👉 Use {% url %} in real projects

🧪 Practice Questions

Add logo in navbar
Add dropdown menu
Make sticky navbar
Add social icons in footer

🎤 Viva Questions & Answers

1. What is a navbar?

Navbar is a navigation bar used to access different pages.

2. What is footer?

Footer is the bottom section containing information like copyright.

3. What is responsive design?

Design that adjusts to different screen sizes.

4. What is media query?

CSS technique to apply styles based on screen size.

5. Why use external CSS?

For reusable and clean styling.

6. What is static file?

CSS, JS, images used for UI.

7. Can navbar be reused?

Yes, using template inheritance or include.

8. Why fix footer at bottom?

For consistent layout.

9. What is hover effect?

Style applied when mouse is over element.

10. Why is layout important?

Improves user experience and navigation.

👉 Next Post: Simple Portfolio Website
👉 Back to List: Django Programs (60 Questions with Solutions)

Design a Responsive Navbar and Footer using Static CSS

📌 Introduction

🎯 Program Statement

🧠 Concept

⚙️ Step 1: Static Folder Structure

📁 Project Structure:

⚙️ Step 2: Create CSS File

📁 File: style.css

🔹 Path:

🔹 Code:

⚙️ Step 3: Create Template

📁 File: layout.html

🔹 Path:

🔹 Code:

⚙️ Step 4: Create View

📁 File: views.py

🔹 Path:

🔹 Code:

⚙️ Step 5: URL Mapping

📁 File: urls.py

🔹 Path:

🔹 Code:

⚙️ Step 6: Run Server

🌐 Step 7: Output

✅ Output Features:

🧠 How It Works

Navbar

Footer

Responsive CSS

🔥 Key Concepts

⚠️ Common Errors

❌ Forgot {% load static %}

❌ Wrong CSS path

❌ Footer overlapping content

❌ Links not working

🧪 Practice Questions

🎤 Viva Questions & Answers

1. What is a navbar?

2. What is footer?

3. What is responsive design?

4. What is media query?

5. Why use external CSS?

6. What is static file?

7. Can navbar be reused?

8. Why fix footer at bottom?

9. What is hover effect?

10. Why is layout important?

Further Reading

Leave a Reply Cancel reply

📁 File: `style.css`

📁 File: `layout.html`

📁 File: `views.py`

📁 File: `urls.py`

❌ Forgot `{% load static %}`