Many of us have noticed, a sticky navigation bar on many websites including this blog...

Here in the GIF, as you can see Table of contents is stuck to the top of the page.

The only purpose of keeping a sticky navbar looks attractive and makes little accessible.

So, you wanna add a sticky navbar to your website?

Let's get started with Vanilla CSS ✌️

• Create basic stucture of navbar

  <div class="container">
  <h1 class="text">stickattop</h1>
  </div>
  

• Add images to create scroll

  <img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg" class="img">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" class="img"/>
  

It's time for CSS 😍

• Styling navbar

  .container{
  position: fixed;
  top: 0;
  width: 100%;
  background: #1e293b;
  }
  

• Styling text

  .text{
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: white;
  }
  

• Full code

  <div class="container">
  <h1 class="text">stickattop</h1>
  </div>
  <img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg" class="img">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" class="img"/>
  

body{
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}
.container{
  position: fixed;
  top: 0;
  width: 100%;
  background: #1e293b;
}
.text{
  text-align: center;
  text-transform: uppercase;
  font-weight: 900;
  letter-spacing: 0.05em;
  color: white;
}

.img{
  width: 100%;
  height: auto; 
}

Output - Vanilla CSS

Let's go with Tailwind CSS 😎

• Creating a sticky navbar

  <div class="top-0 sticky bg-slate-800 text-white py-4">
  <h1 class="uppercase font-black text-center text-3xl tracking-wider">stickattop</h1>
  </div>
  

• Adding images for scroll (optional)

  <img src="https://images.unsplash.com/photo-1646498749176-b4ddb3b3b4a7?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=872&q=80" alt="catimg">
  <img src="https://images.unsplash.com/photo-1646497795650-58de9c4fd44f?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=772&q=80" />
  

Output - Tailwind CSS

🌏 Let's connect

• GitHub
• Twitter
• YouTube

Support me with a coffee

Stay tuned for the next article. Stay safe and Happy Coding!