Close Menu
    JavaScript

    How to make Responsive Navigation Menu Bar using HTML CSS & JS

    Coding StellaBy No Comments6 Mins Read

    Let’s create a Responsive Navigation Menu Bar using HTML, CSS, and JavaScript. This project will feature a navigation menu that adapts to different screen sizes, providing a seamless experience across devices.

    We’ll use HTML to structure the menu, CSS to style it and make it responsive, and JavaScript to add interactivity, such as toggling the menu on smaller screens.

    Let’s get started on building the Responsive Navigation Menu Bar. Whether you’re a beginner or an experienced developer, this project offers a practical way to enhance your web development skills and create a user-friendly navigation system. Let’s ensure smooth navigation across all devices!

    HTML :

    This HTML code creates a responsive navigation menu for a website called “Coding Stella.” It includes links for Home, About, Portfolio, Services, and Contact sections. The menu is mobile-friendly, featuring a collapsible sidebar that can be opened with a menu icon and closed with a close icon. It also has a dark/light mode toggle and a search box. External stylesheets and icon libraries from Boxicons are used to style the navigation elements, while JavaScript (referenced in the script.js file) likely handles the interactive behavior of the menu, dark/light mode, and search functionality.

    <!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">
         
    <!-- ===== Boxicons CSS ===== -->
    <link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>

    <title>Responsive navigation menu bar</title>
</head>
<body>
  <nav>
    <div class="nav-bar">
      <i class="bx bx-menu sidebarOpen"></i>
      <span class="logo navLogo"><a href="#">Coding Stella</a></span>

      <div class="menu">
        <div class="logo-toggle">
          <span class="logo"><a href="#">Coding Stella</a></span>
          <i class="bx bx-x siderbarClose"></i>
        </div>

        <ul class="nav-links">
          <li><a href="#">Home</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Portfolio</a></li>
          <li><a href="#">Services</a></li>
          <li><a href="#">Contact</a></li>
        </ul>
      </div>

      <div class="darkLight-searchBox">
        <div class="dark-light">
          <i class="bx bx-moon moon"></i>
          <i class="bx bx-sun sun"></i>
        </div>

        <div class="searchBox">
          <div class="searchToggle">
            <i class="bx bx-x cancel"></i>
            <i class="bx bx-search search"></i>
          </div>

          <div class="search-field">
            <input type="text" placeholder="Search..." />
            <i class="bx bx-search"></i>
          </div>
        </div>
      </div>
    </div>
  </nav>

  <script src="script.js"></script>
</body>
</html>

    CSS :

    This CSS code styles a responsive navigation bar for a website, with a focus on dark and light modes, and mobile adaptability. It imports the “Poppins” font from Google Fonts and applies a consistent box model and smooth transitions to all elements. The code defines custom color variables (e.g., --body-color, --nav-color) for easy theme management, and switches to a darker color scheme when the .dark class is applied to the body. The navigation bar is fixed at the top and includes styling for menu icons, links, and interactive elements like a dark/light mode toggle and a search box. On smaller screens (below 790px width), the navigation transforms into a sidebar menu that slides in from the left, with responsive adjustments for link display and menu icons.

    @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  transition: all 0.4s ease;
}

/*  Colours  */
:root {
  --body-color: #e4e9f7;
  --nav-color: #4070f4;
  --side-nav: #010718;
  --text-color: #fff;
  --search-bar: #f2f2f2;
  --search-text: #010718;
}

body {
  height: 100vh;
  background-color: var(--body-color);
}

body.dark {
  --body-color: #18191a;
  --nav-color: #242526;
  --side-nav: #242526;
  --text-color: #ccc;
  --search-bar: #242526;
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  height: 70px;
  width: 100%;
  background-color: var(--nav-color);
  z-index: 100;
}

body.dark nav {
  border: 1px solid #393838;
}

nav .nav-bar {
  position: relative;
  height: 100%;
  max-width: 1000px;
  width: 100%;
  background-color: var(--nav-color);
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

nav .nav-bar .sidebarOpen {
  color: var(--text-color);
  font-size: 25px;
  padding: 5px;
  cursor: pointer;
  display: none;
}

nav .nav-bar .logo a {
  font-size: 25px;
  font-weight: 500;
  color: var(--text-color);
  text-decoration: none;
}

.menu .logo-toggle {
  display: none;
}

.nav-bar .nav-links {
  display: flex;
  align-items: center;
}

.nav-bar .nav-links li {
  margin: 0 5px;
  list-style: none;
}

.nav-links li a {
  position: relative;
  font-size: 17px;
  font-weight: 400;
  color: var(--text-color);
  text-decoration: none;
  padding: 10px;
}

.nav-links li a::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 6px;
  width: 6px;
  border-radius: 50%;
  background-color: var(--text-color);
  opacity: 0;
  transition: all 0.3s ease;
}

.nav-links li:hover a::before {
  opacity: 1;
}

.nav-bar .darkLight-searchBox {
  display: flex;
  align-items: center;
}

.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle {
  height: 40px;
  width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 5px;
}

.dark-light i,
.searchToggle i {
  position: absolute;
  color: var(--text-color);
  font-size: 22px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.dark-light i.sun {
  opacity: 0;
  pointer-events: none;
}

.dark-light.active i.sun {
  opacity: 1;
  pointer-events: auto;
}

.dark-light.active i.moon {
  opacity: 0;
  pointer-events: none;
}

.searchToggle i.cancel {
  opacity: 0;
  pointer-events: none;
}

.searchToggle.active i.cancel {
  opacity: 1;
  pointer-events: auto;
}

.searchToggle.active i.search {
  opacity: 0;
  pointer-events: none;
}

.searchBox {
  position: relative;
}

.searchBox .search-field {
  position: absolute;
  bottom: -85px;
  right: 5px;
  height: 50px;
  width: 300px;
  display: flex;
  align-items: center;
  background-color: var(--nav-color);
  padding: 3px;
  border-radius: 6px;
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s ease;
}

.searchToggle.active ~ .search-field {
  bottom: -74px;
  opacity: 1;
  pointer-events: auto;
}

.search-field::before {
  content: "";
  position: absolute;
  right: 14px;
  top: -4px;
  height: 12px;
  width: 12px;
  background-color: var(--nav-color);
  transform: rotate(-45deg);
  z-index: -1;
}

.search-field input {
  height: 100%;
  width: 100%;
  padding: 0 45px 0 15px;
  outline: none;
  border: none;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 400;
  color: var(--search-text);
  background-color: var(--search-bar);
}

body.dark .search-field input {
  color: var(--text-color);
}

.search-field i {
  position: absolute;
  color: var(--nav-color);
  right: 15px;
  font-size: 22px;
  cursor: pointer;
}

body.dark .search-field i {
  color: var(--text-color);
}

@media (max-width: 790px) {
  nav .nav-bar .sidebarOpen {
    display: block;
  }

  .menu {
    position: fixed;
    height: 100%;
    width: 320px;
    left: -100%;
    top: 0;
    padding: 20px;
    background-color: var(--side-nav);
    z-index: 100;
    transition: all 0.4s ease;
  }

  nav.active .menu {
    left: -0%;
  }

  nav.active .nav-bar .navLogo a {
    opacity: 0;
    transition: all 0.3s ease;
  }

  .menu .logo-toggle {
    display: block;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .logo-toggle .siderbarClose {
    color: var(--text-color);
    font-size: 24px;
    cursor: pointer;
  }

  .nav-bar .nav-links {
    flex-direction: column;
    padding-top: 30px;
  }

  .nav-links li a {
    display: block;
    margin-top: 20px;
  }
}

    JavaScript :

    This JavaScript code toggles dark/light mode, shows/hides the search box, and manages the sidebar menu. It saves the user’s theme preference in localStorage to persist after page reloads. The sidebar is opened with a button click and closed by clicking outside the menu area.

    const body = document.querySelector("body"),
      nav = document.querySelector("nav"),
      modeToggle = document.querySelector(".dark-light"),
      searchToggle = document.querySelector(".searchToggle"),
      sidebarOpen = document.querySelector(".sidebarOpen"),
      siderbarClose = document.querySelector(".siderbarClose");

let getMode = localStorage.getItem("mode");

if (getMode && getMode === "dark-mode") {
  body.classList.add("dark");
}

// JS code to toggle dark and light mode
modeToggle.addEventListener("click", () => {
  modeToggle.classList.toggle("active");
  body.classList.toggle("dark");

  // JS code to keep user selected mode even after page refresh or file reopen
  if (!body.classList.contains("dark")) {
    localStorage.setItem("mode", "light-mode");
  } else {
    localStorage.setItem("mode", "dark-mode");
  }
});

// JS code to toggle search box
searchToggle.addEventListener("click", () => {
  searchToggle.classList.toggle("active");
});

// JS code to toggle sidebar
sidebarOpen.addEventListener("click", () => {
  nav.classList.add("active");
});

body.addEventListener("click", (e) => {
  let clickedElm = e.target;
  if (!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")) {
    nav.classList.remove("active");
  }
});

    In conclusion, creating a Responsive Navigation Menu Bar using HTML, CSS, and JavaScript has been a valuable and educational project. By combining these technologies, we’ve built a navigation system that adapts to various screen sizes, enhancing user experience across devices.

    If your project has problems, don’t worry. Just click to download the source code and face your coding challenges with excitement. Have fun coding!

    Share.

    Related Posts

    Add A Comment
    Leave A Reply