Skip to main content

Pure Css Sticky Navigation Bar | Rustcode

by Rustcode
Pure-CSS-Sticky-Navigation-Bar-Rustcode

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.

NAVBAR:

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;
}


4. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also learn about web development from there.


5. SOURCE CODE

After reading this article and watching a YouTube video, if you want to download source code, you can download from here and change this according to your need.


RELATED POST:

Comments

Post a Comment