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>

In this HTML code we defined a <div> and called classes such as logo, navbar & nav_links. And describe the heading as Home, About, Contact. Let us look at the HTML output. Before writing CSS for Navbar.

HTML Output:

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

In this Output we have just code the HTML part and this how it looks like and let us write the CSS for navbar to look attractive.

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);
}

In this snippet we have styled the tag and the classes which we have called in the HTML code. We have styled with the help of align, background-color, transition & padding.
Let us see the Output after writing CSS for Navbar.

CSS Output:

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

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");
}
});
});

In this JavaScript Code we have code the activation of navbar link as soon as user takes the pointer on it and clicks it how it will react accordingly that is stated in the JavaScript Code.
Let us look the final output.

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.

Written by @Harsh_9

Share on:

Leave a Comment