DEV Community

Eelco Verbrugge
Eelco Verbrugge

Posted on • Edited on

12

Simple navbar in html, css and javascript

This navbar will feature a centered logo, menu items, a call-to-action (CTA) button, and a custom hamburger menu for mobile screens. We'll use HTML, CSS, and a bit of JavaScript.

Step 1: Setting Up the HTML Structure

First things first, we gotta lay down the basic structure for our navigation bar in html.

index.html

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="style.css">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
    <nav class="navbar">
        <div class="menu-left">
            <a href="#">Home</a>
            <a href="#">Services</a>
            <a href="#">About</a>
        </div>
        <div class="logo">
            <img src="logo.png" alt="Logo">
        </div>
        <div class="menu-right">
            <a href="#" class="cta-button">Contact Us</a>
            <div class="hamburger" onclick="toggleMobileMenu()">
                <span></span>
                <span></span>
                <span></span>
            </div>
        </div>
    </nav>
    <div id="mobileMenu" class="mobile-menu">
        <a href="#" class="closebtn" onclick="toggleMobileMenu()">&times;</a>
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#" class="cta-button">Contact Us</a>
    </div>

    <script src="script.js"></script>
</body>
</html>
Enter fullscreen mode Exit fullscreen mode

Step 2: Styling with CSS

Now, let's get fancy with the visuals. We're talking modern design vibes here—subtle shadows, smooth transitions, the works.

style.css

.navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #333;
    color: white;
    padding: 10px 20px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.menu-left, .menu-right, .logo {
    display: flex;
    align-items: center;
}

.logo img {
    max-height: 50px;
}

.hamburger {
    display: none;
    cursor: pointer;
    flex-direction: column;
    justify-content: space-around;
    width: 30px;
    height: 25px;
}

.hamburger span {
    background-color: white;
    height: 3px;
    width: 100%;
    border-radius: 2px;
    transition: all 0.3s ease;
}

.cta-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.cta-button:hover {
    background-color: #0056b3;
}

.mobile-menu {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #111;
    overflow-x: hidden;
    transition: width 0.5s ease;
    padding-top: 60px;
}

.mobile-menu a {
    padding: 15px 25px;
    text-decoration: none;
    font-size: 22px;
    color: white;
    display: block;
    transition: color 0.3s ease;
}

.mobile-menu a:hover {
    color: #ddd;
}

.mobile-menu .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    cursor: pointer;
}

@media screen and (max-width: 768px) {
    .menu-left, .menu-right .cta-button {
        display: none;
    }

    .menu-right .hamburger {
        display: flex;
    }
}

@media screen and (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
}

a {
    color: white;
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: #ddd;
}

.navbar a:not(.cta-button) {
    padding: 10px 15px;
    margin: 0 5px;
    transition: background-color 0.3s ease;
}

.navbar a:not(.cta-button):hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 5px;
}

Enter fullscreen mode Exit fullscreen mode

Step 3: Adding JavaScript for Interactivity

For the mobile crowd, we'll sprinkle a bit of JavaScript magic. When you hit that burger menu, it'll conjure up the mobile menu in style.

function toggleMobileMenu() {
    const menu = document.getElementById("mobileMenu");
    if (menu.style.width === "100%") {
        menu.style.width = "0";
    } else {
        menu.style.width = "100%";
    }
}
Enter fullscreen mode Exit fullscreen mode

Conclusion

And there you have it, a super cool and responsive navigation bar, ready to rock the digital world.

Sentry image

See why 4M developers consider Sentry, “not bad.”

Fixing code doesn’t have to be the worst part of your day. Learn how Sentry can help.

Learn more

Top comments (0)

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more