Navbar & Media query

Introduction
Navigation bars are essential for any website. They guide users to different sections and make the site easy to explore. In this project, I built a responsive navigation bar using HTML, CSS, and media queries. The highlight is a hamburger menu that appears on smaller screens, making the design mobile‑friendly without JavaScript.

Page Structure
The navigation bar (<nav>) contains:

Logo (div.logo) → Displays the site name.

Checkbox (#menu-icon) → Hidden by default, used to toggle the mobile menu.

Label (.menu-bar) → The hamburger icon (☰) that users click.

Navigation links (ul.nav-links)→ Menu items like Home, About, Services, Contact.

<nav class="nav-bar">
    <div class="logo">Mysite</div>
    <input type="checkbox" id="menu-icon">
    <label for="menu-icon" class="menu-bar">&#9776;</label>
    <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>
</nav>

Styling the Navigation Bar
The nav bar uses Flexbox to align items horizontally:

.nav-bar {
    background-color: black;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    padding: 10px;
}
.nav-links {
    list-style-type: none;
    display: flex;
    gap: 20px;
}
.nav-links li a {
    text-decoration: none;
    font-size: 16px;
    color: white;
    transition: color 0.3s;
}
.nav-links li a:hover {
    color: rgb(109, 171, 242);
}

Media Queries
The media query ensures the nav adapts to smaller screens:

@media(max-width:768px){
    .nav-links {
        display: none;
    }
    .menu-bar {
        display: block;
    }
    #menu-icon:checked ~ .nav-links {
        display: flex;
        flex-direction: column;
        position: absolute;
        top: 70px;
        left: 0;
        background-color: black;
        width: 100%;
        text-align: center;
    }
}

On desktop (>768px) → Links are visible, hamburger icon hidden.

On mobile (≤768px) → Links are hidden, hamburger icon appears.

When the hamburger is clicked → The hidden checkbox gets checked, and the links appear vertically.