How to create a stylish navbar for your website ~ sa

Navigation bar describes about your pages, it will be look stylish and quality one. here is a simple and stylish navigation bar for your website by using simple css.

DEMO

CSS File:

html {
  font-family: 'Roboto', sans-serif;
  font-weight: 100;
  background: #f25916;
}
.container {
  width: 960px;
  margin: 50px auto;
}

nav {
  list-style: none;
  position: relative;
}

nav li {
  float: left;
}

nav li a {
  position: relative;
  padding: 18px 34px;
  color: rgba(255, 255, 255, 0.5);
  font-size: 14px;
  text-transform: uppercase;
  text-decoration: none;
  background: #374140;
  border-right: 1px solid #2A2C2B;
  border-bottom: 10px solid #2A2C2B;
  transition: all 0.1s ease;  
  font-weight:bold;
}

nav li a:hover {
   color: rgba(255, 255, 255, 0.9);
   border-bottom: 15px solid #2A2C2B;
   top: -5px;
}

nav li a:active {
   color: rgba(255, 255, 255, 0.2);
   border-bottom: 0px solid #2A2C2B;
   top: 10px;  
}

HTML File:

<div class="container">
    <nav>
    
    <li><a href="">HOME</a></li>
    <li><a href="">PAGE 1</a></li>
    <li><a href="">PAGE 2</a></li>
    <li><a href="">PAGE 3</a></li>
    <li><a href="">PAGE 4</a></li>
    
    </nav>
</div>

sa

How to create a stylish navbar for your website

HTML File:

Related Post