Responsive Navigation bar with Source Code

Today we are going to build a Responsive navigation bar. A responsive navigation bar ensures that your website is easy to explore, whether on a desktop, tablet, or mobile phone. In this blog, we’ll walk you through how to create a stylish, responsive navigation bar using HTML, CSS, and a touch of JavaScript. Let’s dive right in!

Step-by-Step Guide to Building a Responsive Navigation Bar

1. Setting Up the HTML Structure

First things first, we need to create the basic structure of our webpage and navigation bar using HTML. Here’s what our HTML looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
    <title>Responsive Navbar || Codeallready</title>
</head>
<body>
    <div class="container">
        <div class="navbar">
            <div class="logo">
                <a href="#">Logo</a>
            </div>
            <ul class="links">
                <li><a href="#" active>Trends</a></li>
                <li><a href="#">Services</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
            <a href="#" class="action_btn">Get Started</a>
            <div class="toggle_btn"><i class="fa-solid fa-bars"></i></div>
        </div>
        <div class="dropdown_menu">
            <li><a href="#">Trends</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">About Us</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#" class="action_btn">Get Started</a></li>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

Our HTML code sets up a basic navigation bar structure, complete with a logo, navigation links, a call-to-action button, and a toggle button for smaller screens. Notice that we have two main components for navigation: the standard navbar for larger screens and a dropdown menu that appears on smaller screens. We have linked with Font awesome CDN for the Icons used in this navigation bar.

2. Styling with CSS

Next, we style our navigation bar with CSS to make it visually appealing and responsive. Here’s a breakdown of the key parts of our CSS:

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,400;1,500;1,700;1,800;1,900&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    text-decoration: none;
    list-style: none;
}

body {
    background-color: #fff;
    font-family: 'Poppins', sans-serif;
    height: 100vh;
}

.container {
    max-width: 80%;
    margin: 0 auto;
}

.navbar {
    width: 100%;
    height: 90px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.navbar .links {
    display: flex;
    gap: 4rem;
}

.navbar .logo a {
    font-size: 2.5rem;
    font-weight: bold;
    color: #0099ff;
}

.links li a {
    color: #111;
    font-weight: 400;
    transition: all 0.5s ease;
}

.navbar .toggle_btn {
    color: #111;
    font-size: 20px;
    cursor: pointer;
    display: none;
}

.navbar .action_btn {
    background-color: #0099ff;
    color: #fff;
    padding: 0.5rem 1rem;
    border: none;
    border-radius: 5px;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.action_btn:hover {
    transform: scale(1.05);
}

.action_btn:active {
    transform: scale(0.95);
}

.links li a:hover {
    color: #fff;
    background-color: #0099ff;
    padding: 10px;
    border-radius: 5px;
}

.dropdown_menu {
    display: none;
    position: absolute;
    right: 70px;
    top: 70px;
    background-color: #394252;
    border-radius: 5px;
    overflow: hidden;
    transition: height 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.dropdown_menu.open {
    height: 250px;
}

.dropdown_menu li {
    padding: 0.7rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

@media (max-width: 940px) {
    .navbar .links,
    .navbar .action_btn {
        display: none;
    }
    .navbar .toggle_btn {
        display: block;
    }
    .dropdown_menu {
        display: block;
    }
}

Key CSS Components:

  • Container Styling: Ensures the navbar is centered and has some breathing room on the sides.
  • Flexbox Layout: The .navbar uses Flexbox to align items horizontally and space them evenly.
  • Responsive Elements: Media queries are used to hide the regular navigation links and buttons on smaller screens while displaying the toggle button and dropdown menu.
  • Hover Effects: Adds a smooth hover effect to links and buttons for a better user experience.
  • Dropdown Menu: Hidden by default, the .dropdown_menu only appears when the screen width is below a certain threshold or when toggled.

3. Adding Interactivity with JavaScript

Finally, we use a small JavaScript snippet to add interactivity to our navigation bar. This script toggles the dropdown menu when the user clicks the toggle button:

const toggleBtn = document.querySelector(".toggle_btn");
const toggleBtnIcon = document.querySelector(".toggle_btn i");
const dropDownMenu = document.querySelector(".dropdown_menu");

toggleBtn.onclick = function() {
    dropDownMenu.classList.toggle('open');
    const isOpen = dropDownMenu.classList.contains('open');
    toggleBtnIcon.classList = isOpen ? 'fa-solid fa-xmark' : 'fa-solid fa-bars';
}

JavaScript Functionality:

  • Toggle Button: The JavaScript code listens for a click event on the toggle button. When clicked, it toggles the open class on the .dropdown_menu, which changes its height and visibility.
  • Icon Change: Depending on whether the menu is open or closed, the toggle button icon switches between a hamburger menu (fa-bars) and a close icon (fa-xmark).

Result-

Conclusion

And there you have it! A fully responsive navigation bar that looks great and works smoothly across all devices. By combining HTML for structure, CSS for styling and responsiveness, and JavaScript for interactivity, we’ve created a navigation bar that enhances the user experience and makes your website more accessible.

Do Check your Youtube channel.

You can find this on your Youtube –