Home Html CSS Tutorial How to Make Sticky Navigation Bar in html and css

How to Make Sticky Navigation Bar in html and css

February 12, 2022 Modified date: February 12, 2022

Hi everyone, today we are going to learn How to Make a Sticky Navigation Bar with Html and CSS only

When working on a website, it’s essential to have easy and efficient navigation. That’s why having a sticky navigation bar is a must-have for any website. A sticky navigation bar makes your website user-friendly by keeping your readers constantly refreshed with the latest changes. It also helps you keep track of your website’s current state and ensures that your readers can quickly get to the content they need without having to scroll through many pages.

WHAT IS A STICKY NAVIGATION BAR?

A sticky navigation bar is a type of web navigation that keeps your readers constantly refreshed with the latest changes. It also helps you keep track of your website’s current state and ensures that your readers can quickly get to the content they need without having to scroll through many pages.

Sticky Navigation Bar in html and CSS (Video tutorials)

HOW TO MAKE A STICKY NAVIGATION BAR IN HTML AND CSS

1. Start by creating a file called “navigation.html.” This file will contain the basic structure of your website.

2. In this file, you’ll need to create a logical and organized layout. You’ll want to segregate your content into different sections so that readers can easily find what they’re looking for.

3. Next, you’ll need to add some basic CSS to your file. In particular, you’ll need to create a navigation bar and an anchor link.

4. Next, you’ll need to add the sticky navigation bar to your page. To do this, drag the navbar onto the page in the usual way (by clicking on it and then dragging it off the page).

5. Finally, add an anchor link to the navbar so that readers can easily click on it and get to the content they need.

You Might Like This:

WHAT ADVANTAGES DOES A STICKY NAVIGATION BAR HAVE?

sticky navigation bar as a way to organize your website. By having a sticky navigation bar with easy-to-use drag and drop tools, you can easily change the order of your pages and make sure that all your content is always at the top of the page.

Sticky Navigation Bar | Source Code

below is the source code for the sticky navigation bar but before you proceed, you need to create two files: an HTML file and a CSS file. After Creating these two files then you can copy-paste the following codes in your documents.

Html Code

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>Sticky Navigation menu bar  html css</title>
    <link rel="stylesheet" href="style.css" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  </head>
  <body>
    <section id="hero-banner">
     <div class="container">
       <header>
         <div class="logo">
           <img src="Logo.jpg" alt="logo">
         </div>
         <div class="nav">
           <ul>
          <li> <a href="#"> Home</a></li>
          <li> <a href="#"> About</a></li>
          <li> <a href="#"> Services</a></li>
          <li> <a href="#"> Products</a></li>
          <li> <a href="#"> Pricing</a></li>
          <li> <a href="#"> Job</a></li>
           </ul>
         </div>
         <div class="sub-nav">
           <a href="#" class="btn sign_in">Sign in</a>
           <a href="#" class="btn sign_up"> Sign up</a>
         </div>
       </header>
       <div class="content">
         <div class="desc">
           <h1>Sticky Navigation Bar</h1>
         </div>
         <div class="hero_image">
           <img src="Hero-image-min.png" alt="hero image ">
         </div>
       </div>
     </div>

    </section>
  </body>
</html>

CSS code

/* Google Font 
    font-family: 'Roboto', sans-serif; */

    @import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;700&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body{
  font-family:'Roboto', sans-serif; 
}
.container{
  max-width: 1140px;
  margin: 0 auto;
  /* background: green; */
}

#hero-banner{
  background-color: #E3F5F6;
  min-height: 200vh;
  padding-top: 30px;
}
header{
  background-color: #ffffff;
  position: fixed;
  width: 1140px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  border-radius: 20px;
}

header .nav ul{
  display: flex;
  list-style: none ;
}

header .nav ul li {
  margin-left: 25px;
}

header .nav ul li a{
  text-decoration: none;
  font-size: 14px;
  transition:  0.6s;
}
header .nav ul li a:hover{
  color: #e270cb;
  border-bottom:  2px solid #ed61d0;
}

header .sub-nav .btn {
  text-decoration: none;
  margin-right: 20px;
  font-size: 14px;
  transition: 0.6s;
}
header .sub-nav .btn:not(:last-child):hover{
  color: #ed61d0;
}
header .sub-nav .sign_up{
  background: #2d47cd;
  padding: 15px 30px;
  border-radius: 30px;
  color :#ffffff
}
header .sub-nav .sign_up:hover{
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2),
  0 6px 20px 0 rgba(0,0,0,0.19);
  padding: 15px 35px ;
}
.content{
  display: flex;
  justify-content: space-between;
}
.content .desc h1{
  font-size: 96px;
  margin-top: 250px;
  color: #ed61d0;
}

.content .hero_image img {
  width: 600px;
  margin-top: 150px;
}

Download

(Visited 293 times, 1 visits today)