Responsive Sticky Navigation Bar using HTML CSS & JavaScript

Hello readers, Today in this blog you'll learn how to create a Responsive Sticky Navigation Bar using HTML CSS & JavaScript. Earlier I've shared a blog on how to create a Responsive Navigation Menu Bar but now I'm going to create a Responsive Sticky Navbar on Scroll.

What is a Sticky Menu on Scroll? Sticky, or fixed, the navbar is a graphical UI element of the website that is locked into place (mainly on top) on scroll so that it does not disappear or scroll when the user scrolls the page up or down.

In this program [Responsive Sticky Navigation Bar], at first, on the webpage there a transparent navbar that means it has no background color but when you scroll a little bit down then the background color appears and this navbar locked on the top of the webpage. This navigation bar is mobile-friendly which means this navbar is responsive to mobile devices also. In the PC, this navbar is shown horizontally but on mobile, this navbar is shown vertically.

Video Tutorial of Responsive Sticky Navigation Bar

In the video, you have seen the Responsive Sticky or Fixed Navbar and I hope you've understood the basic codes behind creating this navbar or navigation bar. In this video tutorial, I haven't written the codes of Clip Animation on Menu which I've shown in the demo part but I've provided codes of the menu in the source files.

If you're a beginner and you don't know JavaScript, then you can download the files of this program from the below link mentioned as "Click here to download files" and use it on your projects, websites, and HTML pages without any limitations.

Responsive Sticky Navigation Bar [Source Codes]

To create this program (Responsive Sticky Navbar). First, you need to create two Files one HTML File and another one is CSS File. After creating these files just paste the following codes into your file. You can also download the source code files through the given link. In the source files, there you also get the images of this program. Click here to download source code files.

HTML FILE:

<!DOCTYPE html>
<!-- Created By CodingNepal - www.codingnepalweb.com -->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!--  <title>Responsive Sticky Navbar | CodingNepal</title> -->
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>
</head>
<body>
  <nav class="navbar">
    <div class="content">
      <div class="logo">
        <a href="#">CodingNepal</a>
      </div>
      <ul class="menu-list">
        <div class="icon cancel-btn">
          <i class="fas fa-times"></i>
        </div>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Features</a></li>
        <li><a href="#">Contact</a></li>
      </ul>
      <div class="icon menu-btn">
        <i class="fas fa-bars"></i>
      </div>
    </div>
  </nav>
  <div class="banner"></div>
  <div class="about">
    <div class="content">
      <div class="title">Responsive Sticky Navigation Menu Bar on Scroll using HTML CSS & JavaScript</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo impedit atque consequatur! Iusto distinctio temporibus repellendus labore odit adipisci harum ipsa beatae natus, eum eius, hic aperiam odio! Quasi molestias magnam illo voluptatem iusto ipsam blanditiis, tempore cumque reiciendis quaerat vero tenetur, sequi dolores libero voluptas vitae voluptate placeat dolorum modi ipsa nisi repellat facilis aliquam asperiores. Aut nam repellat harum quas saepe dolorum voluptates ratione, itaque consectetur explicabo a facilis rem mollitia maxime repudiandae fuga reprehenderit, odio cum incidunt labore molestiae quis non perferendis ipsam. Illum, in, deserunt. Ipsa.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Impedit hic excepturi nobis id, eos dolor libero, nam assumenda, at culpa quos perspiciatis ratione ea modi! Natus sapiente a, explicabo sit quisquam eligendi esse provident eos enim doloremque blanditiis aut placeat veniam, libero nostrum quae. Ipsam, iste reprehenderit minima accusantium illo dolorem recusandae, ipsa autem quidem reiciendis a mollitia sit tenetur.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint doloremque perspiciatis voluptate ducimus reiciendis rem expedita voluptatibus dicta harum, quo, aspernatur maiores possimus officia quod? Aliquid molestiae illo sequi, tempora perferendis at incidunt nam porro voluptatibus, iste aperiam blanditiis adipisci ducimus repellendus distinctio nostrum ipsum! Voluptas facilis cum, atque tempora magnam beatae sequi! Doloribus expedita, cupiditate quo quod nemo aliquam, mollitia cum ea nam ullam soluta temporibus! Repudiandae incidunt consequatur distinctio deleniti obcaecati sit facilis unde, quisquam veniam ad doloribus!</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Amet veniam error deleniti cum beatae non assumenda illum est dolores, possimus suscipit quibusdam eveniet id fuga dolore unde modi, sapiente voluptas. Mollitia veritatis explicabo cumque enim quia voluptates provident totam perferendis excepturi animi assumenda optio minus laudantium eveniet possimus amet blanditiis dolore in fuga atque, earum officia tempora quam similique est.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque ad sunt distinctio quidem incidunt cupiditate sequi deleniti, corrupti officia nam veritatis facilis veniam dolorum enim nisi ipsum dolor rem! Doloribus, eaque odit voluptatem iste laboriosam provident facere quo. Cum repellat pariatur, error ratione repellendus nisi quam culpa tempora facere in atque nesciunt, magni est aliquid unde soluta optio! Dolore pariatur, quaerat quo in cupiditate deleniti exercitationem. Facilis suscipit corporis unde aut minima nihil, eum molestias itaque, tenetur, beatae ipsa at!</p>
    </div>
  </div>

  <script>
    const body = document.querySelector("body");
    const navbar = document.querySelector(".navbar");
    const menuBtn = document.querySelector(".menu-btn");
    const cancelBtn = document.querySelector(".cancel-btn");
    menuBtn.onclick = ()=>{
      navbar.classList.add("show");
      menuBtn.classList.add("hide");
      body.classList.add("disabled");
    }
    cancelBtn.onclick = ()=>{
      body.classList.remove("disabled");
      navbar.classList.remove("show");
      menuBtn.classList.remove("hide");
    }
    window.onscroll = ()=>{
      this.scrollY > 20 ? navbar.classList.add("sticky") : navbar.classList.remove("sticky");
    }
  </script>

CSS FILE:

@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;
}
/* custom scroll bar */
::-webkit-scrollbar {
    width: 10px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1;
}
::-webkit-scrollbar-thumb {
    background: #888;
}
::selection{
  background: rgb(0,123,255,0.3);
}
.content{
  max-width: 1250px;
  margin: auto;
  padding: 0 30px;
}
.navbar{
  position: fixed;
  width: 100%;
  z-index: 2;
  padding: 25px 0;
  transition: all 0.3s ease;
}
.navbar.sticky{
  background: #1b1b1b;
  padding: 10px 0;
  box-shadow: 0px 3px 5px 0px rgba(0,0,0,0.1);
}
.navbar .content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.navbar .logo a{
  color: #fff;
  font-size: 30px;
  font-weight: 600;
  text-decoration: none;
}
.navbar .menu-list{
  display: inline-flex;
}
.menu-list li{
  list-style: none;
}
.menu-list li a{
  color: #fff;
  font-size: 18px;
  font-weight: 500;
  margin-left: 25px;
  text-decoration: none;
  transition: all 0.3s ease;
}
.menu-list li a:hover{
  color: #007bff;
}
.banner{
  background: url("banner.jpg") no-repeat;
  height: 100vh;
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
}
.about{
  padding: 30px 0;
}
.about .title{
  font-size: 38px;
  font-weight: 700;
}
.about p{
  padding-top: 20px;
  text-align: justify;
}
.icon{
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  display: none;
}
.menu-list .cancel-btn{
  position: absolute;
  right: 30px;
  top: 20px;
}
@media (max-width: 1230px) {
  .content{
    padding: 0 60px;
  }
}
@media (max-width: 1100px) {
  .content{
    padding: 0 40px;
  }
}
@media (max-width: 900px) {
  .content{
    padding: 0 30px;
  }
}
@media (max-width: 868px) {
  body.disabled{
    overflow: hidden;
  }
  .icon{
    display: block;
  }
  .icon.hide{
    display: none;
  }
  .navbar .menu-list{
    position: fixed;
    height: 100vh;
    width: 100%;
    max-width: 400px;
    left: -100%;
    top: 0px;
    display: block;
    padding: 40px 0;
    text-align: center;
    background: #222;
    transition: all 0.3s ease;
  }
  .navbar.show .menu-list{
    left: 0%;
  }
  .navbar .menu-list li{
    margin-top: 45px;
  }
  .navbar .menu-list li a{
    font-size: 23px;
    margin-left: -100%;
    transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
  }
  .navbar.show .menu-list li a{
    margin-left: 0px;
  }
}
@media (max-width: 380px) {
  .navbar .logo a{
    font-size: 27px;
  }
}

Thanks for visiting, Keep visiting.

23 Comments

We welcome relevant and respectful comments. Off-topic or spam comments may be removed.

Haj ŽiviniceOctober 22, 2020 at 6:35 PM
Best off... Thanks for works!
ttongueNovember 1, 2020 at 2:49 AM
Awesome job mate, thank you for this! I am a relative beginner, I'm trying to combine your navbar with some grid design below it. when i link both your css and bootstrap CDN it messes up the navbar significantly, thoughts on how to do this correctly? Again, thank you for the code!
rosari JNovember 4, 2020 at 2:36 PM
i cant save this in my blogger dashboard
arunNovember 10, 2020 at 4:08 PM
hello sir, the html source code is missiong,not working, please give me correct and full code. thanks for your help
MariposaJanuary 14, 2021 at 12:37 AM
.navbar.show .menu-list{
left:0%;

How can I show the navbar from the right? right:0%; or 100% won't work.
AnonymousJanuary 20, 2021 at 3:56 AM
Thank you. I would recomend you web designers. I subed to you and told my family about you.
AlexanderJanuary 25, 2021 at 8:49 PM
Hi, excellent work, man! However, there seems to be an issue with the mobile menu version of the "Sticy Navbar - Clip Animation on Menu" code. Open the mobile bar menu, click on a link (I have added the respective hyperlinks in the text), and the mobile menu stays open covering the whole screen. On your "personal profile website" the mobile menu closes on link-click. Best.
Science quiz 1st lesson for 7th grade studentsFebruary 5, 2021 at 3:25 PM
where is the image adding code to add the image like you showed in the video

please tell me me how to add and where to add the image

thank you
vijebananaFebruary 14, 2021 at 9:19 AM
hai, i cannot download this source code
Dhanush J AMarch 22, 2021 at 1:07 PM
I added this navbar with bootstrap cdn. Navbar didn't work correctly. Without bootstrap cdn, it works fine. Can you help me?
Dhanush J AMarch 22, 2021 at 1:09 PM
This code didn't work well with bootstrap cdn. How to run correctly with bootstrap cdn? Help me

Video Tutorial of Responsive Sticky Navigation Bar

You might like this:

Responsive Sticky Navigation Bar [Source Codes]

Thanks for visiting, Keep visiting.

23 Comments

Post a Comment

About Us

Contact Form