Design a sticky Navigation using the CSS position property

manoj , Credit to  volkotech-solutions Mar 15
navbar banner image

To design a sticky navigation using CSS position property, set the position property to "sticky", and add top and left properties to position it on the screen. 

Sticky navigation is a type of navigation menu that stays fixed to the top of the screen as the user scrolls down the page. This can be useful for providing easy access to important navigation links even as the user explores the content of your website. We can learn more about the position here How to Use CSS Positioning to Create Dynamic Web Layouts

Structuring the layout with required HTML

Index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="./style.css">
    <title>Document</title>
</head>
<body>
   <header>HEADER</header>
    <main>
      <div class="container">
        <h1 class="main">MAIN CONTENT</h1>
        <nav class="navigation">
            <ul class="lists">
                <li>HOME</li>
                <li>PROJECTS</li>
                <li>FEATURES</li>
                <li>MENU</li>
                <li>GALLERY</li>
                <li>ABOUT US</li>
                <li>CONTACT US</li>
            </ul>
        </nav>
        <div class="sticky">
            <div class="left-content">
                <h2>Question-1</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-2</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-3</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-4</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-5</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-6</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-7</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-8</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-9</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-10</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-11</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
                <h2>Question-12</h2>
                <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Consequuntur voluptate possimus nulla laboriosam dolorem! A veritatis optio odio provident dolore! Maiores delectus reiciendis et esse dignissimos debitis unde tenetur a.</p>
            </div>
        </div>
      </div>
    </main>
    <footer>FOOTER</footer>
</body>
</html>
navbar layout image

Designing the layout with required CSS properties

Style.css

body {
  padding: 100px 50px;
  max-width: 80%;
  margin: 0 auto;
  background: #000d57;
  font-family: monospace;
  font-size: 14px;
}

.main{
  text-align: center;
}

main {
  background: #fff;
  margin: 25px 0;
  padding: 40px 0;
}

header,main, .lists, footer{
  box-shadow: inset 5px 5px 12px #555, 5px 5px 12px rgb(235 235 235 / 16%);
  border-radius: 10px;
}

header,
footer{
  background: #fff;
  text-align: center;
  padding: 50px;
  font-size: 20px;
  font-weight: 600;
}

.sticky {
  display: flex;
}

.left-content{
  flex: 0 0 60%;
  padding: 0 85px;
}

.lists{
  display: flex;
  background-color: #001173;
  padding: 10px;
  margin: 0px 10px;
  margin-bottom: 20px;
  color: #fff;
  font-weight: 600;
  font-size: 18px;
}

.lists li{
  list-style: none;
  text-decoration: none;
  padding: 10px;
}

.navigation{
  position: sticky;
  top: 1rem;
}

Final results

navbar layout image

A sticky navigation GIF fulfills the requirement of keeping the navigation menu visible to the user as they scroll down a web page. It improves user experience by making it easier to navigate and access different sections of the website.

GIF Output

navbar sticky GIF

Conclusion

In this Article, The CSS position property, we can easily be designed a sticky navigation that improves user experience and site navigation. I hope you guys are Learnt something new here. Thank you.

Comments