DEV Community

Sathish 226
Sathish 226

Posted on

Day 4, Session 1 on HTML, focusing on responsive navigation bars

#webdev #css #html #programming

Hi Everyone!!!

In today’s web design, having a responsive navigation bar is essential. Whether your visitors use desktops, tablets, or smartphones,your website should adapt smoothly.

In this blog, we’ll walk through how to build a simple responsive navigation bar using only HTML and CSS

what we learn:

We want a navigation bar that:

1.Shows the site logo + menu links on large screens
2.Hides the menu links and shows a hamburger (☰) icon on small screens
3.Uses semantic HTML and modern CSS (like flexbox and media queries)

HTML Structure:

We use semantic tags to make our structure clean and accessible:

<nav class="navbar">
    <div class="logo">MySite</div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
    <div class="hamburger">
        &#9776;
    </div>
</nav>
Enter fullscreen mode Exit fullscreen mode

Key tags:

1.<nav> → groups the navigation section
2.<ul> + <li> → builds the list of navigation items
3.<a> → creates clickable links
4.<div class="hamburger"> → holds the hamburger icon (☰) for small screens

CSS Styling:

We’ll style the layout using flexbox and make it responsive with media queries.

/* Reset default styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
}

/* Navbar container */
.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    padding: 15px 20px;
    color: white;
}

/* Logo */
.logo {
    font-size: 24px;
    font-weight: bold;
}

/* Navigation links */
.nav-links {
    list-style: none;
    display: flex;
}

.nav-links li {
    margin-left: 20px;
}

.nav-links a {
    text-decoration: none;
    color: white;
    font-size: 18px;
}

/* Hamburger icon (hidden on large screens) */
.hamburger {
    display: none;
    font-size: 28px;
    cursor: pointer;
}
Enter fullscreen mode Exit fullscreen mode

How It Works

1.We use flexbox (display: flex) on the .navbar to arrange the logo, links, and hamburger icon in a row.

2.On large screens, .nav-links is visible (display: flex) and .hamburger is hidden.

3.On small screens (under 768px), the media query:

  • Hides .nav-links (display: none)
  • Shows the .hamburger icon (display: block)

This creates a responsive layout without needing JavaScript.

Limitations Without JavaScript

Right now, the hamburger icon is just for display — clicking it doesn’t open the menu because we haven’t added any interactivity.

1.It’s great as a visual-only demo.
2.To make the menu actually open/close, we’ll need JavaScript or advanced CSS tricks (like using a hidden checkbox + :checked selector).

Image description

What Next?!!

That's all for Today!

Today, we focused on building the foundation of a responsive navigation bar using only HTML and CSS — no JavaScript yet.

In the next session, we’ll:

1.Finish the full responsive navbar with working toggle functionality
2.Add interactivity using JavaScript or advanced CSS tricks
3.Push the complete project to GitHub so it’s version-controlled and shareable

--Stay Tunes!! Happy Coding!!

Top comments (0)