The sticky navigation bar is a good navbar that is very popular which gives premium look to our website.. In day-to-day life, we go through a lot of websites but you observe that some websites have different types of navigation bars or menus which make that website more attractive and impressive. You can see our articles on navigation bars (menus) which will help you to know how to make different types of navigation bars (menu). You can follow the articles below for more menu designs.
In this article, we will learn how to create a sticky navigation bar. Because sometimes we want our website content to be scrolled but the menu remains sticky. This is why in this article a navigation bar has been created which will be fixed at the top of the web browser screen and your web content will scrollable. Only HTML and CSS are used here, there is no JavaScript. We can also create this type of navigation using JavaScript and jquery but we learn about that kind of navigation bar in another article.
1. HTML STRUCTURE
<!DOCTYPE html> <html> <head> <title>Pure Css Sticky Navigation Bar | Rustcode</title> <link rel="stylesheet" href="style.css"> </head> <body> main content. </body> </html>
2. CONTENT
We are also including an image in the blog card design. You can download that image from here.
<body> <div class="header"> <h3>Sticky Navigation Bar</h3> </div> <div class="menu"> <a href="#">HOME</a> <a href="#">FEATURES</a> <a href="#">BLOG</a> <a href="#">ABOUT</a> <a href="#">CONTACT</a> </div> <div class="image-container"> <img src="image.jpg" class="image"/> </div> <div class="content"> <h2>Sticky Navigation Bar</h2> <p>Proin eget tristique arcu. Duis at metus laoreet, mattis dolor vel, pulvinar odio. Integer ornare nisi ultrices tellus elementum ultricies. Interdum et malesuada fames ac ante ipsum primis in faucibus. Duis vel tristique ipsum, in tempor lectus. Praesent id odio ut ligula auctor ultrices nec eget ligula. Praesent varius nisi lacus, ut pretium ligula pellentesque eu. Phasellus porttitor quis ipsum a venenatis. Mauris lobortis maximus massa a congue.</p> </div> </body>
3. CSS
body{ padding: 0px; margin: 0px; background: #e1e1e1; } .header{ background: rgba(0, 0, 0, 0.9); padding: 6px 24px; text-align: left; color: white; margin: 0px; letter-spacing: 1px; font: caption; font-size: 24px; text-transform: uppercase; } .menu{ position: sticky; top: 0px; background-color: black; margin: 0px; overflow: hidden; } .menu a{ font: "Arial"; text-decoration: none; font-size: 18px; letter-spacing: 1px; box-sizing: border-box; float: left; display: inline-block; color: #f2f2f2; text-align: center; padding: 16px 24px; } .menu a:hover{ background: #ff9f1c; color: black; } .image-container{ position: relative; z-index: -1; top: 0px; } .image-container .image{ max-width: 100%; max-height: 100vh; } .content{ padding: 0px 24px; text-align: justify; font-size: 20px; }
Comments
Post a Comment