The Navigation Bar is now regarded by both users and the website’s creator as its most crucial section. Did you know that, despite the website’s importance, it may be created with just a few lines of simple HTML and CSS lines of code?

In this blog, I have provided 10 Free Website Navigation bars in HTML & CSS along with JavaScript code to add more functionality like dark light mode, and responsive features. Even If you are a complete beginner in HTML and CSS then also you will be able to create the given Navigation Bar. Recently, I published 16 Free Login & Registration Forms, which could also enhance your skills in HTML and CSS.

The navigation bar is the area that is positioned at the top of websites or applications to assist users in switching from one page to another. Mainly the navigation bar contains a logo, navigation links, and other functions as per the motto of the website.

Now let’s get into the Navigation Bar list

1. Simple Responsive Navigation Bar in HTML & CSS

• Watch Video Tutorial
• Download Source Code

2. Responsive Neumorphism Navigation Bar in HTML & CSS

This Navigation Bar is the most fascinating one I’ve ever made in HTML and CSS. Its distinctive user interface is its most appealing feature. This type of interface is called Neumorphism.

This is also a beginner-friendly Navigation Bar that you create in just HTML and CSS. If you want to make a Navigation Bar in the Neumorohism user interface then this navbar design could be best for you. For the source code and the video tutorial for this Neumorphism Navigation Bar please visit the given links.

• Watch Video Tutorial
• Download Source Code

3. Navigation Bar with Scrolling to the Top Button

This is the most useful Navigation Bar you get in this Navigation Bar list. The main feature of this Navigation Bar is that when you click on each navigation link its section appears and also you can move to the top by clicking on the scroll to top button which is aligned at the right bottom.

If you want to create a Navigation Bar with an active link and scroll to the top button then you should definitely try to create this Navigation Bar.

• Watch Video Tutorial
• Download Source Code

4. Fullscreen Overlay Navigation Bar in HTML & CSS

This is the Fullscreen Overlay Navigation Bar I have created in  HTML & CSS. Bascially when you click on the bar icon then the given interface appears with a circular shape animation. I have also added hover animation for those navigation links.

If you want to create a Fullscreen Overlay Navigation Bar in HTML and CSS then you should definitely try to create this animated navigation bar. You can easily create this navigation with basic HTML and CSS lines of code. For the source code and the video tutorial link for this Navigation Menu Bar check out the given links.

• Watch Video Tutorial
• Download Source Code

5. All Navigation Links Hover Animations in HTML & CSS

As you can see, I made all of the regularly used navigation links’ hover animations. When I hover over each navigation link in this area, four hover animations are displayed. The first starts from the left and turns around, the second starts from the middle, the third starts from the bottom, and the last one starts from the left and turns around.

If you want to learn to create regularly used modern hover animation on the link then you can try this. With the basic HTML and CSS, you can create this. You can get to the source code and video tutorial from the given link for this navigation link hover animation.

• Watch Video Tutorial
• Download Source Code

6. Sticky Navigation Bar in HTML & CSS

This is the Sticky Navigation Bar which is created in HTML CSS and JavaScript. Bascially, when you scroll the webpage the Navigation gets stuck on the top. We will get to find this type of Sticky Navigation on modern websites mostly.

You must attempt to develop this Sticky Navigation Bar in HTML CSS & JavaScript if you want to learn how to make a navigation bar for a trendy website. You can click on the provided links to see the source code and the video tutorial for this Sticky Navigation Bar.

• Watch Video Tutorial
• Download Source Code

7. Mobile Navigation Bar in HTML CSS & JavaScript

Typically, mobile devices employ this kind of navigation bar. Through the use of HTML, CSS, and JavaScript, I constructed this tab bar navigation menu bar. Its animated indicator is the key characteristic of this Navigation Bar. Basically, the ringed indicator moves to the selected navigation symbol with lovely animation when you click on it.

If you want to learn to create a Navigation Bar for mobile screen devices and this could be the best for you. You can simply create this Mobile Navigation Bar in HTML CSS and JavaScript. You can click the given links for the source code and the video tutorial for this Mobile Navigation Bar.

• Watch Video Tutorial
• Download Source Code

8. Navigation Bar with Dark and Light Mode in HTML CSS JS

Additionally, this navigation bar is totally responsive and has functionality for Dark and Light Modes. The selected mode remains unchanged even if the page is refreshed or reopened, which is another fascinating feature I’ve introduced to this navigation. Additionally, there is a search box, which makes this navigation bar more modern and practical.

I used HTML, CSS, and JavaScript to build this navigation bar. Local website storage was used to keep the mode that was chosen. I sincerely hope you like it and try to create it. For the source code and the video tutorial for this navigation bar, please click on the provided links.

• Watch Video Tutorial
• Download Source Code

9. Dropdown Navigation Bar in HTML CSS & JavaScript

You will find a search bar and a submenu in this responsive dropdown navigation bar, just like I have shown in the picture. JavaScript, CSS, and HTML were used to create this navigation. The dropdown menu appears when you hover over the navigation links, and you may access the submenu from there as well.

This can be the ideal strategy for you if you want to develop a responsive drop-down menu bar with submenus. This Dropdown Navigation Bar can be made even with very minimal knowledge of HTML, CSS, and JavaScript. For the source code and video instructions for this drop-down navigation bar, click on the following links.

• Watch Video Tutorial
• Download Source Code

10. Navigation Bar with Search Box in HTML CSS & JS

The finest responsive navigation bar with a long search bar on this list is this one. All the navigation links disappear when you click the search icon, and a lengthy search field appears with lovely animation. You can see the responsive overview of the navigation bar on the left.

This could be the finest example to meet your requirements if you’re looking for a Responsive Navigation Bar with a lengthy search box. This navigation bar can be made using simple lines of HTML, CSS, and JavaScript code. For the source code and a video tutorial for this Responsive Navigation Bar with the search box, click on the provided links.

• Watch Video Tutorial
• Download Source Code

Conclusion

These were my Top 10 Responsive Navigation Bars, which I developed using HTML, CSS, and JavaScript. I tried to include diverse navigation bars with various functionalities. I hope they meet your needs and that you like them.

There are lots of other Navigation Bars I have created, if you want to create them step by step with me then you can visit My YouTube Channel. As well as the navigation bar there are lots of other Projects you will find there which I have created using HTML CSS & JavaScript.

If you find this blog helpful, don’t forget to share it with others.

Hello, my friend, I hope you all are doing well. Today we are going to create something that mostly uses on the website and is important for the website, that is Sticky Navigation Bar in HTML CSS and JavaScript. I have created many types of Navigation Menu but to date, I haven’t built any sticky navbar on scroll. Without doing ado let’s get started.

Sticky Navigation Bar in HTML CSS and JavaScript 

You Might Like This:

Sticky Navigation Bar | Source Code

<!DOCTYPE html>
<!-- Coding By CodingNepal - codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
     <title> Sticky Navigation Bar | CodingLab </title> 
    <link rel="stylesheet" href="style.css">
   </head>
<body>
  <nav>
    <div class="nav-content">
      <div class="logo">
        <a href="#">CodingLab.</a>
      </div>
      <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Skills</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
    </div>
  </nav>
  <section class="home"></section>
  <div class="text">
    <p><h2>Sticky Navigation Bar</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sed culpa minus ducimus nostrum aspernatur qui odit assumenda consectetur dolorum autem. Impedit aperiam nemo fuga numquam molestias sit quaerat quae doloribus est facilis ab, asperiores voluptatum dolore? Dignissimos porro corporis, veniam esse animi pariatur vitae quas est, amet minima et ratione tenetur earum officiis fugiat saepe eius nisi dolor, iusto voluptas obcaecati nam! Facere excepturi quibusdam, magni fugit quia, accusantium eum dolorum id dolores. Enim consectetur tempore distinctio, natus dolore incidunt. Repellendus ut natus, sit at inventore, reiciendis. Praesentium, tempore. Laborum consequuntur, illo voluptatem nobis rem molestias corporis laboriosam sint officiis, inventore atque, repellendus. Blanditiis molestiae minima consequuntur et accusamus illum, laboriosam placeat perferendis sed. Maiores eos laboriosam quas eius ratione dignissimos laborum doloremque, praesentium obcaecati cum consectetur magnam accusamus, esse, corporis aliquid pariatur mollitia corrupti cupiditate ipsa iure enim provident. Earum, voluptate! Similique quas veniam voluptas, maiores perspiciatis error voluptatum!</p>
    <br><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima libero consequatur necessitatibus voluptatibus vel, ut asperiores magnam velit, eum veritatis natus, dolorum sit ipsum quidem laborum! Facilis officia itaque, explicabo harum illum, repellat nihil corporis! Dolor, libero vero, consequuntur sed necessitatibus corporis. Facilis autem natus animi pariatur quaerat rerum nemo quibusdam veritatis provident error nostrum ratione dolore officiis non amet, quidem dolores eaque sint blanditiis odio porro ut, quam soluta. Necessitatibus, aperiam eum doloremque voluptate qui aliquid consequatur aspernatur debitis expedita unde vitae quia officiis, delectus, possimus ratione ex rerum dignissimos maxime molestiae asperiores. Tempora recusandae debitis exercitationem quo facere reprehenderit tenetur, dolore laboriosam repellat modi. Magnam ratione iste quo perspiciatis explicabo deserunt temporibus quaerat inventore quod accusantium atque, dolores commodi nobis distinctio, fugit illum, soluta quisquam est in omnis! Recusandae incidunt voluptatem, consequuntur doloremque! Nisi incidunt, iure quidem dolores odit sint, ut quam. Ipsum, maiores doloremque velit numquam quisquam.</p>
  </div>

  <script>
  let nav = document.querySelector("nav");
    window.onscroll = function() {
      if(document.documentElement.scrollTop > 20){
        nav.classList.add("sticky");
      }else {
        nav.classList.remove("sticky");
      }
    }
  </script>

</body>
</html>

/* Google Font Import Link */
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;500;700&display=swap');
  *{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  text-decoration: none;
  font-family: 'Ubuntu', sans-serif;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  padding: 20px;
  transition: all 0.4s ease;
}
nav.sticky{
  padding: 15px 20px;
  background: #4070f4;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
nav .nav-content{
  height: 100%;
  max-width: 1200px;
  margin: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
nav .logo a{
  font-weight: 500;
  font-size: 35px;
  color: #4070f4;
}
nav.sticky .logo a{
  color: #fff;
}
.nav-content .nav-links{
  display: flex;
}
.nav-content .nav-links li{
  list-style: none;
  margin: 0 8px;
}
 .nav-links li a{
  text-decoration: none;
  color: #0E2431;
  font-size: 18px;
  font-weight: 500;
  padding: 10px 4px;
  transition: all 0.3s ease;
}
 .nav-links li a:hover{
   color: #4070f4;
 }
 nav.sticky .nav-links li a{
   color: #fff;
   transition: all 0.4s ease;
}
 nav.sticky .nav-links li a:hover{
  color: #0E2431;
}
.home{
  height: 100vh;
  width: 100%;
  background: url("images/background.png") no-repeat;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  font-family: 'Ubuntu', sans-serif;
}
h2{
  font-size: 30px;
  margin-bottom: 6px;
  color: #4070f4;
}
.text{
  text-align: justify;
  padding: 40px 80px;
  box-shadow: -5px 0 10px rgba(0, 0, 0, 0.1);
}

How to create a dropdown navigation bar in HTML CSS?

A: To create a responsive drop-down navigation bar with a submenu, I have provided essential codes article and video tutorial below:

Hello readers, today we will learn How to Create a Responsive Drop Down Menu with Sub Menu in HTML & CSS and a little touch of JavaScript. Earlier, I have created various blogs of Responsive Navigation Bar using HTML and CSS, but I haven’t built any drop-down navigation menu bar.

What is Drop-Down Menu?

Simply, Drop down menu means that features on the navigation bar from the sub-menu come out while clicking or by doing hover on the parent navigation links. Submenu helps to reduce space on the navigation bar that makes it easier for users to explore the things that they want from the website.

How many links should be in your main navigation and sub-menu?

What is the element you have included on the drop-down navigation bar?

As you can see on the given image of the drop-down navigation menu with sub-menu. Basically, you can add the following elements that I have added to my drop-down menu. You can add the following elements to the navigation menu.

How do I create a dropdown navigation menu with a submenu?

There are various ways to create a drop-down navigation menu. I think the following are the best and easy ways:

In HTML:

Make <ul> </ul> tag as a parents for the main navigation links.

Inside the <ul> </ul> tag add <li> </li> tag like this <ul><li>Home</li></ul>

Now for submenu add  <ul> </ul> tag again inside the <li> </li> like this:
<ul><li>Home
<ul>
<li>Sub Menu</li>
</ul>
</li></ul>

In CSS:

ul li{position: relative}; (to main parent li tag)
ul li ul{position: absolute
top: 0;
left: 100%;
display: none};

make it visible when we hover on the parent element by giving display: block

For getting the virtual example of this responsive drop-down navigation menu with submenu and codes that I have used to build this type of navbar with submenu, I recommend you to watch the following video tutorial.

Drop Down Navigation Menu with Sub Menu | Video Tutorial

You May Like This:

Drop Down Menu with Sub Menu | Source Code

Top copy-paste the following HTML CSS and JavaScript codes you need to create two files, one is HTML file and another is CSS files on your computer you can also download files directly by clicking on the given download button.

How do you create a dropdown in HTML?

Create an HTML file with the name index.html on your computer and copy-paste the following HTML codes on your HTML document.

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
  <head>
    <meta charset="UTF-8">
   <title> Responsive Drop Down Navigation Menu | CodingLab </title>
    <link rel="stylesheet" href="style.css">
    <!-- Boxicons CDN Link -->
    <link href='https://unpkg.com/boxicons@2.0.7/css/boxicons.min.css' rel='stylesheet'>
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
   </head>
<body>
  <nav>
    <div class="navbar">
      <i class='bx bx-menu'></i>
      <div class="logo"><a href="#">CodingLab</a></div>
      <div class="nav-links">
        <div class="sidebar-logo">
          <span class="logo-name">CodingLab</span>
          <i class='bx bx-x' ></i>
        </div>
        <ul class="links">
          <li><a href="#">HOME</a></li>
          <li>
            <a href="#">HTML & CSS</a>
            <i class='bx bxs-chevron-down htmlcss-arrow arrow  '></i>
            <ul class="htmlCss-sub-menu sub-menu">
              <li><a href="#">Web Design</a></li>
              <li><a href="#">Login Forms</a></li>
              <li><a href="#">Card Design</a></li>
              <li class="more">
                <span><a href="#">More</a>
                <i class='bx bxs-chevron-right arrow more-arrow'></i>
              </span>
                <ul class="more-sub-menu sub-menu">
                  <li><a href="#">Neumorphism</a></li>
                  <li><a href="#">Pre-loader</a></li>
                  <li><a href="#">Glassmorphism</a></li>
                </ul>
              </li>
            </ul>
          </li>
          <li>
            <a href="#">JAVASCRIPT</a>
            <i class='bx bxs-chevron-down js-arrow arrow '></i>
            <ul class="js-sub-menu sub-menu">
              <li><a href="#">Dynamic Clock</a></li>
              <li><a href="#">Form Validation</a></li>
              <li><a href="#">Card Slider</a></li>
              <li><a href="#">Complete Website</a></li>
            </ul>
          </li>
          <li><a href="#">ABOUT US</a></li>
          <li><a href="#">CONTACT US</a></li>
        </ul>
      </div>
      <div class="search-box">
        <i class='bx bx-search'></i>
        <div class="input-box">
          <input type="text" placeholder="Search...">
        </div>
      </div>
    </div>
  </nav>
  <script src="script.js"></script>
</body>
</html>

Create a CSS file with the name style.css on your computer and copy-paste the following CSS codes on your CSS document.

/* Googlefont Poppins CDN Link */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@200;300;400;500;600;700&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: 'Poppins', sans-serif;
}
body{
  min-height: 100vh;
}
nav{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  height: 70px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  z-index: 99;
}
nav .navbar{
  height: 100%;
  max-width: 1250px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: auto;
  /* background: red; */
  padding: 0 50px;
}
.navbar .logo a{
  font-size: 30px;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
}
nav .navbar .nav-links{
  line-height: 70px;
  height: 100%;
}
nav .navbar .links{
  display: flex;
}
nav .navbar .links li{
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  list-style: none;
  padding: 0 14px;
}
nav .navbar .links li a{
  height: 100%;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(180deg);
  }

nav .navbar .links li .arrow{
  /* background: red; */
  height: 100%;
  width: 22px;
  line-height: 70px;
  text-align: center;
  display: inline-block;
  color: #fff;
  transition: all 0.3s ease;
}
nav .navbar .links li .sub-menu{
  position: absolute;
  top: 70px;
  left: 0;
  line-height: 40px;
  background: #3E8DA8;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  border-radius: 0 0 4px 4px;
  display: none;
  z-index: 2;
}
nav .navbar .links li:hover .htmlCss-sub-menu,
nav .navbar .links li:hover .js-sub-menu{
  display: block;
}
.navbar .links li .sub-menu li{
  padding: 0 22px;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}
.navbar .links li .sub-menu a{
  color: #fff;
  font-size: 15px;
  font-weight: 500;
}
.navbar .links li .sub-menu .more-arrow{
  line-height: 40px;
}
.navbar .links li .htmlCss-more-sub-menu{
  /* line-height: 40px; */
}
.navbar .links li .sub-menu .more-sub-menu{
  position: absolute;
  top: 0;
  left: 100%;
  border-radius: 0 4px 4px 4px;
  z-index: 1;
  display: none;
}
.links li .sub-menu .more:hover .more-sub-menu{
  display: block;
}
.navbar .search-box{
  position: relative;
   height: 40px;
  width: 40px;
}
.navbar .search-box i{
  position: absolute;
  height: 100%;
  width: 100%;
  line-height: 40px;
  text-align: center;
  font-size: 22px;
  color: #fff;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s ease;
}
.navbar .search-box .input-box{
  position: absolute;
  right: calc(100% - 40px);
  top: 80px;
  height: 60px;
  width: 300px;
  background: #3E8DA8;
  border-radius: 6px;
  opacity: 0;
  pointer-events: none;
  transition: all 0.4s ease;
}
.navbar.showInput .search-box .input-box{
  top: 65px;
  opacity: 1;
  pointer-events: auto;
  background: #3E8DA8;
}
.search-box .input-box::before{
  content: '';
  position: absolute;
  height: 20px;
  width: 20px;
  background: #3E8DA8;
  right: 10px;
  top: -6px;
  transform: rotate(45deg);
}
.search-box .input-box input{
  position: absolute;
  top: 50%;
  left: 50%;
  border-radius: 4px;
  transform: translate(-50%, -50%);
  height: 35px;
  width: 280px;
  outline: none;
  padding: 0 15px;
  font-size: 16px;
  border: none;
}
.navbar .nav-links .sidebar-logo{
  display: none;
}
.navbar .bx-menu{
  display: none;
}
@media (max-width:920px) {
  nav .navbar{
    max-width: 100%;
    padding: 0 25px;
  }

  nav .navbar .logo a{
    font-size: 27px;
  }
  nav .navbar .links li{
    padding: 0 10px;
    white-space: nowrap;
  }
  nav .navbar .links li a{
    font-size: 15px;
  }
}
@media (max-width:800px){
  nav{
    /* position: relative; */
  }
  .navbar .bx-menu{
    display: block;
  }
  nav .navbar .nav-links{
    position: fixed;
    top: 0;
    left: -100%;
    display: block;
    max-width: 270px;
    width: 100%;
    background:  #3E8DA8;
    line-height: 40px;
    padding: 20px;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
    transition: all 0.5s ease;
    z-index: 1000;
  }
  .navbar .nav-links .sidebar-logo{
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .sidebar-logo .logo-name{
    font-size: 25px;
    color: #fff;
  }
    .sidebar-logo  i,
    .navbar .bx-menu{
      font-size: 25px;
      color: #fff;
    }
  nav .navbar .links{
    display: block;
    margin-top: 20px;
  }
  nav .navbar .links li .arrow{
    line-height: 40px;
  }
nav .navbar .links li{
    display: block;
  }
nav .navbar .links li .sub-menu{
  position: relative;
  top: 0;
  box-shadow: none;
  display: none;
}
nav .navbar .links li .sub-menu li{
  border-bottom: none;

}
.navbar .links li .sub-menu .more-sub-menu{
  display: none;
  position: relative;
  left: 0;
}
.navbar .links li .sub-menu .more-sub-menu li{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.links li:hover .htmlcss-arrow,
.links li:hover .js-arrow{
  transform: rotate(0deg);
  }
  .navbar .links li .sub-menu .more-sub-menu{
    display: none;
  }
  .navbar .links li .sub-menu .more span{
    /* background: red; */
    display: flex;
    align-items: center;
    /* justify-content: space-between; */
  }

  .links li .sub-menu .more:hover .more-sub-menu{
    display: none;
  }
  nav .navbar .links li:hover .htmlCss-sub-menu,
  nav .navbar .links li:hover .js-sub-menu{
    display: none;
  }
.navbar .nav-links.show1 .links .htmlCss-sub-menu,
  .navbar .nav-links.show3 .links .js-sub-menu,
  .navbar .nav-links.show2 .links .more .more-sub-menu{
      display: block;
    }
    .navbar .nav-links.show1 .links .htmlcss-arrow,
    .navbar .nav-links.show3 .links .js-arrow{
        transform: rotate(180deg);
}
    .navbar .nav-links.show2 .links .more-arrow{
      transform: rotate(90deg);
    }
}
@media (max-width:370px){
  nav .navbar .nav-links{
  max-width: 100%;
} 
}

Create a JS file with the name script.js on your computer and copy-paste the following JScodes on your JS document.

// search-box open close js code
let navbar = document.querySelector(".navbar");
let searchBox = document.querySelector(".search-box .bx-search");
// let searchBoxCancel = document.querySelector(".search-box .bx-x");

searchBox.addEventListener("click", ()=>{
  navbar.classList.toggle("showInput");
  if(navbar.classList.contains("showInput")){
    searchBox.classList.replace("bx-search" ,"bx-x");
  }else {
    searchBox.classList.replace("bx-x" ,"bx-search");
  }
});

// sidebar open close js code
let navLinks = document.querySelector(".nav-links");
let menuOpenBtn = document.querySelector(".navbar .bx-menu");
let menuCloseBtn = document.querySelector(".nav-links .bx-x");
menuOpenBtn.onclick = function() {
navLinks.style.left = "0";
}
menuCloseBtn.onclick = function() {
navLinks.style.left = "-100%";
}


// sidebar submenu open close js code
let htmlcssArrow = document.querySelector(".htmlcss-arrow");
htmlcssArrow.onclick = function() {
 navLinks.classList.toggle("show1");
}
let moreArrow = document.querySelector(".more-arrow");
moreArrow.onclick = function() {
 navLinks.classList.toggle("show2");
}
let jsArrow = document.querySelector(".js-arrow");
jsArrow.onclick = function() {
 navLinks.classList.toggle("show3");
}

If you face any difficulties while creating your Dropdown Navigation Bar or your code is not working as expected, you can download the source code files for this Dropdown Navbar Menu  for free by clicking on the download button, and you can also view a live demo of this card slider by clicking on the view live button.