Responsive Sticky Navigation Bar | For a Website - Using HTML, CSS & Javascript | Coding Snow | Creative Web Design Tutorials

Description

Hello everyone! In this video, you are going to learn how to design a responsive sticky navigation bar for a website using HTML, CSS, and Vanilla Javascript. About the responsive capabilities: When the device screen size becomes smaller the navigation bar turns into a fixed sidebar that can be expanded and collapsed using menu buttons (menu button and close button). This navigation bar will be more useful because when you are scroll down anywhere on the page the navigation bar will be visible so you can navigate through the sidebar links(linked pages) without going back to the top of the page. You can easily use this navigation bar for any website you design. Let's see how to design this responsive sticky navigation bar.

First, create the index.html file and the style.css file. After you created these two files, then link the style.css file in between <head></head> tags to the index.html file. Then start the HTML part of the responsive sticky navigation bar in the index.html file as you can see in the video. After the HTML part is complete, then go to the style.css file and do the styling part of the responsive sticky navigation bar as you can see in the video. After the styling part is completed then go to the index.html file for the Javascript part. In the index.html file before the body close tag open <script></script> tags and complete the Javascript part of the responsive sticky navigation bar to implement the scroll function for the effects on the navigation bar on the scroll. In between the script tags as you can see in the video. So that's all, Hope this video will be helpful to design a stunning responsive sticky navigation bar for a website using HTML, CSS, and Vanilla Javascript.

Source Codes

index.html

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Sticky NavBar | For a Website</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css">
  </head>
  <body>

<header>
      <a href="#" class="brand">Brand</a>
      <div class="menu">
        <div class="btn">
          <i class="fas fa-times close-btn"></i>
        </div>
        <a href="#">Home</a>
        <a href="#">Services</a>
        <a href="#">About</a>
        <a href="#">Blog</a>
        <a href="#">Contact</a>
      </div>
      <div class="btn">
        <i class="fas fa-bars menu-btn"></i>
      </div>
    </header>
    <section class="section-main">
      <h1>Sticky Navigation Bar</h1>
    </section>
    <section class="section-two">
      <h2>Protect Rainforests</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <h2>Protect Nature</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </section>

//javascript for responsive navigation sidebar menu
    var menu = document.querySelector('.menu');
    var menuBtn = document.querySelector('.menu-btn');
    var closeBtn = document.querySelector('.close-btn');

menuBtn.addEventListener("click", () => {
      menu.classList.add('active');
    });

closeBtn.addEventListener("click", () => {
      menu.classList.remove('active');
    });
    </script>

</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap');

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
}

body{
  min-height: 100vh;
}

.section-main{
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px 100px;
}

.section-main h1{
  color: rgba(255, 255, 255, 0.5);
  font-size: 60px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 2px;
  line-height: 80px;
}

header{
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 100px;
  transition: 0.6s;
}

header.sticky{
  background: #1483D5;
  padding: 15px 100px;
}

header .brand{
  color: #fff;
  font-size: 30px;
  font-weight: 700;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: 2px;
}

header .menu{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}

header .menu a{
  color: #fff;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  margin: 0 30px;
  padding: 0 10px;
  border-radius: 20px;
  transition: 0.3s;
  transition-property: color, background;
}

header .menu a:hover{
  color: #000;
  background: #fff;
}

header .btn{
  color: #fff;
  font-size: 25px;
  cursor: pointer;
  display: none;
}

.section-two{
  min-height: 100vh;
  background: #001018;
  padding: 20px 100px;
}

.section-two h2{
  color: rgba(255, 255, 255, 0.5);
  font-size: 50px;
  font-weight: 700;
  text-transform: uppercase;
  margin: 30px 0;
}

.section-two p{
  color: rgba(255, 255, 255, 0.5);
  font-size: 18px;
  margin: 30px 0;
}

@media (max-width: 1060px){
  header .btn{
    display: block;
  }

header .menu{
    position: fixed;
    background: #1483D5;
    flex-direction: column;
    min-width: 400px;
    height: 100vh;
    top: 0;
    right: -100%;
    padding: 80px 50px;
    transition: 0.5s;
    transition-property: right;
  }

header .menu.active{
    right: 0;
  }

header .menu .close-btn{
    position: absolute;
    top: 0;
    left: 0;
    margin: 25px;
  }

header .menu a{
    display: block;
    font-size: 20px;
    margin: 20px;
    padding: 0 15px;
  }
}

@media (max-width: 630px){
  .section-main h1{
    font-size: 50px;
    line-height: 60px;
  }
}

Download Source Files

If the download didn't start automatically, click here.

Wednesday, January 13, 2021

Responsive Sticky Navigation Bar | For a Website - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form

Wednesday, January 13, 2021

Responsive Sticky Navigation Bar | For a Website - Using HTML, CSS & Javascript

Description

Source Codes

index.html

style.css

Follow Us on

Featured Post

Complete Responsive Personal Portfolio Website - Using Html, CSS & Javascript

Popular Posts

Tags

Contact Form