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

https://www.codewithrandom.com/2022/05/How-to-Create-a-Navbar.html

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 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

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:

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 {  
  scr

Read more