How to Create Responsive Navbar easily Using HTML, CSS and JavaScript || Free Source Code

byramCoder -
0

 Hello everyone! In this blog you will learn how to create a navigation bar that is completely responsive for mobile devices and is also visually appealing. For creating this navigation bar, I will only use HTML, CSS and little bit of JavaScript. Understanding the code for this navigation bar is very easy. Everyone can understand the code for this responsive navigation bar. I also have uploaded the source code file in GitHub as well so you can download the source code directly. also I will provide the code in the bottom of this post so that you can copy and paste the code to implement in your own project.

I have used icons from font awesome and fonts from google fonts in this navigation bar. Also this navigation bar has some other features like animated hover underline effect, toggle menu, etc. The source code for this navbar is completely free and you don't need to pay any money to use the source code.




In order to use this navbar into your own project, you will need to follow the following instructions.

Step 1:

First of all, you will need to create an index.html file in your code editor. After you create the index.html file, you need to add the following code in the file.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Nav-Bar Tutorial || ramCoder</title>
    <!-- linking font awesome icons -->
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
    />
    <!-- linking google fonts -->
    <link rel="preconnect" href="https://fonts.gstatic.com" />

    <link
      href="https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap"
      rel="stylesheet"
    />

    <!-- linking css -->
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navigation">
      <div class="logo">
        <h1>NavBar</h1>
      </div>
      <div class="burger">
        <!-- using fontawesome icons -->
        <i class="fa fa-fw fa-bars"></i>
      </div>
      <div>
        <ul class="nav-list">
          <a href="#"><li class="nav-links">Home</li></a>
          <a href="#"><li class="nav-links">About</li></a>
          <a href="#"><li class="nav-links">Services</li></a>
          <a href="#"><li class="nav-links">Contact</li></a>
        </ul>
      </div>
    </nav>

    <script src="./script.js"></script>
  </body>
</html> {codeBox}

Remember to link CSS file as well as JavaScript file in index.html file. {alertWarning}

 

Step 2:

After Step 1, you will have to create an style.css file in the same directory. Once you create the style.css file you need to add the following code in the file.

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  font-family: "Poppins", sans-serif;
  font-size: 1.5em;
  overflow-x: hidden;
}
nav {
  height: 50px;
  background-color: #58a0bd;
  display: flex;
  justify-content: space-around;
  color: aliceblue;
}
.nav-list {
  display: flex;
  flex-direction: column;
  height: 90vh;
  width: 50%;
  justify-content: space-around;
  position: absolute;
  right: 0%;
  top: 50px;
  background-color: #58a0bd;
  align-items: center;
  transform: translateX(100%);
  transition: transform 1s ease-in-out;
}
.nav-links,
.nav-list a {
  list-style: none;
  text-decoration: none;
  color: aliceblue;
  animation: navItemFade 1s ease-in-out;
}
.burger {
  cursor: pointer;
  position: absolute;
  top: 8px;
  right: 25%;
}
.nav-list-active {
  transform: translateX(0%);
}
.nav-list a ::after {
  content: "";
  display: block;
  width: 0;
  height: 4px;
  background: aliceblue;
  transition: width 0.3s ease-in-out;
}
.nav-list a:hover ::after {
  width: 100%;
}{codeBox}

Step 3:

After you finish with style.css file you will need to create an script.js file in the same folder. Then add the following JavaScript code.

const burger = document.querySelector(".burger");
const navList = document.querySelector(".nav-list");
const font = document.querySelector(".fa");

burger.addEventListener("click", () => {
  navList.classList.toggle("nav-list-active");
  font.classList.toggle("fa-bars");
  font.classList.toggle("fa-times");
});{codeBox}

So, this is how you can create a completely responsive navigation bar to implement in your next project.

Tags:

Post a Comment

Previous Post Next Post