This website uses cookies to enhance the user experience

Making a Responsive Navbar with CSS Grid

Share:

Web DevelopmentCSS

Hi all,
I’m trying to create a responsive navigation bar using CSS Grid. I want it to collapse into a hamburger menu on smaller screens. Does anyone have a simple example or guide on how to achieve this?

Harry David

9 months ago

1 Response

Hide Responses

Sophia Mitchell

9 months ago

Hi,
To create a responsive navbar using CSS Grid, you can use the following example:

HTML:

<nav class="navbar">
    <div class="logo">Logo</div>
    <div class="menu">
        <a href="#">Home</a>
        <a href="#">About</a>
        <a href="#">Services</a>
        <a href="#">Contact</a>
    </div>
    <div class="hamburger">☰</div>
</nav>

CSS:

.navbar {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding: 10px;
    background-color: #333;
    color: white;
}

.menu {
    display: flex;
    gap: 20px;
}

.hamburger {
    display: none;
    cursor: pointer;
}

@media (max-width: 768px) {
    .menu {
        display: none;
    }
    .hamburger {
        display: block;
    }
}

JavaScript (optional for toggling menu):

const hamburger = document.querySelector('.hamburger');
const menu = document.querySelector('.menu');

hamburger.addEventListener('click', () => {
    menu.style.display = menu.style.display === 'flex' ? 'none' : 'flex';
});

This example creates a responsive navbar that shows a hamburger menu on smaller screens.

0