How to Create a Navbar | Creating Navbar using HTML, CSS & JavaScript

Creating Navbar using HTML, CSS & JavaScript | Navbar in CSS

Introduction:

Hello coders, welcome to codewithrandom. Today we’ll look how to create a Navigation Bar or Navbar with the help of HTML, CSS and JavaScript. We as a Front-End Developer has a this tool named HTML, CSS & JavaScript. Through it we can make it creative and grab the attention of user interface. Before going to the code part let’s see what is Navbar.

What is Navbar?

A Navigation Bar or Navbar is an element in the webpage or website. It contains links which redirect the user interface from one page to another. The <nav> tag wraps all the primary bars i.e., the main navigation of the website. It can be either vertical or horizontal.
Let us see the coding part of the Navbar.

HTML Code:

 <div class="navbar">  
  <div class="logo">  
   <h1>Codewithrandom</h1>  
  </div>  
  <div class="nav__links">  
   <a href="#home" class="active nav__link">Home</a>  
   <a href="#about" class="nav__link">About</a>  
   <a href="#contact" class="nav__link">Contact</a>  
  </div>  
 </div>  
 <div id="home" class="section">  
  <h1>Home</h1>  
 </div>  
 <div id="about" class="section">  
  <h1>About</h1>  
 </div>  
 <div id="contact" class="section">  
  <h1>Contact</h1>  
 </div>  
 <script src="main.js"></script>  

HTML Output:

CSS Code:

 @import url("https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap");  
 * {  
  padding: 0;  
  margin: 0;  
  box-sizing: border-box;  
  font-family: "Poppins", sans-serif;  
 }  
 body {  
  scroll-behavior: smooth;  
 }  
 .navbar {  
  display: flex;  
  align-items: center;  
  justify-content: space-between;  
  padding: 10px 50px;  
  box-shadow: 0 1px 5px 1px rgba(0, 0, 0, 0.2);  
  width: 100vw;  
  position: fixed;  
  background-color: white;  
  transition: all 0.5s ease-in-out;  
 }  

In this snippet we have import and defined the URL for fonts. And styled the body & navbar. We aligned that in center. Styling is necessary because that is the only key to attract the attention of user interface.

 .logo h1 {  
  cursor: pointer;  
 }  
 .nav__links {  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .nav__link {  
  margin: 0 10px;  
  color: black;  
  padding: 5px 15px;  
  border-radius: 100px;  
  transition: all 0.5s ease-in-out;  
  text-decoration: none;  
 }  
 .nav__link.active,  
 .nav__link:hover {  
  background-color: black;  
  color: white;  
 }  
 .section {  
  min-height: 100vh;  
  display: flex;  
  align-items: center;  
  justify-content: center;  
 }  
 .section:nth-child(odd) {  
  background-color: rgb(235, 235, 235);  
 }  

CSS Output:

JavaScript Code:

 // active navbar link  
 const sections = document.querySelectorAll(".section");  
 window.addEventListener("scroll", function (event) {  
  sections.forEach((section) => {  
   let top = window.scrollY + 250;  
   let offset = section.offsetTop;  
   let height = section.offsetHeight;  
   let id = section.getAttribute("id");  
   if (top >= offset && top < offset + height) {  
    document.querySelectorAll(".active").forEach((a) => {  
     a.classList.remove("active");  
    });  
    document.querySelector("[href*=" + id + "]").classList.add("active");  
   }  
  });  
 });  

Final Output:

Summary:

We have used our tool HTML, CSS & JavaScript and we have created a Navbar. We have defined and called many classes and tags. Then in CSS we have styled the defined tags and in JS we have set the activation of Navbar links. If you loved it do comment it boosts our motivation to bring new Front-End Development projects. If you are facing any difficulty while performing you are feel free to reach out with the help of comment section.