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>
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
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
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.
21 likes
Add to read list
Comments