How to Create Responsive Navbar

In this tutorial, i will learn you How to Create Responsive Navbar using CSS. You can see demo and download source code from here

Demo Download

Step to Create Responsive Navbar

To create responsive navbar, we follow the below all steps;

  • Create a Index File
  • Create a CSS File

1: Create a Index File

First of all, we create a one file which name of index.html and add below code in head section.

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>How to Create Responsive Navbar</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/a076d05399.js"></script>

After filled head section then paste all below code in body section

<body>
  <nav>
    <input type="checkbox" id="check">
    <label for="check" class="checkbtn">
      <i class="fas fa-bars"></i>
    </label>
    <label class="logo">T-Code Scripts</label>
    <ul>
      <li><a class="active" href="#">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Services</a></li>
      <li><a href="#">Contact</a></li>
      <li><a href="#">Feedback</a></li>
    </ul>
  </nav>
  <section></section>
</body>

In above code, we create a one nav bar and in which we create a input tag, label tag and ul tag for logo and and menu bar.

2: Create a CSS File

Create a style.css file and paste all below code in it.

*{
  padding: 0;
  margin: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}
body{
  font-family: montserrat;
}
nav{
  background: #ff3d91;
  height: 80px;
  width: 100%;
}
label.logo{
  color: white;
  font-size: 35px;
  line-height: 80px;
  padding: 0 30px;
  font-weight: bold;
}
nav ul{
  float: right;
  margin-right: 10px;
}
nav ul li{
  display: inline-block;
  line-height: 80px;
  margin: 0 5px;
}
nav ul li a{
  color: white;
  font-size: 17px;
  padding: 7px 13px;
  border-radius: 3px;
  text-transform: uppercase;
}
a.active,a:hover{
  background: #ff006f;
  transition: .5s;
}
.checkbtn{
  font-size: 30px;
  color: white;
  float: right;
  line-height: 80px;
  margin-right: 40px;
  cursor: pointer;
  display: none;
}
#check{
  display: none;
}
@media (max-width: 858px){
  label.logo{
    font-size: 30px;
    padding: 0 20px;
  }
  .checkbtn{
    display: block;
  }
  ul{
    position: fixed;
    width: 100%;
    height: 100vh;
    top: 80px;
    left: -100%;
    text-align: center;
    transition: all .5s;
  }
  nav ul li{
    display: block;
    margin: 0px 0;
    line-height: 60px;
    background: #ff0070;
    border-bottom: 1px solid #fff; 
  }
  nav ul li a{
    font-size: 20px;
  }
  a:hover,a.active{
    background: none;
    color: #262626;
  }
  #check:checked ~ ul{
    left: 0;
  }
}
section{
  background: url(bg.jpg) no-repeat;
  background-size: cover;
  background-position: center;
  height: calc(100vh - 80px);
}

In above code, we get stylish navbar and logo with the help of above code and also made a responsive with help of media query.

Conclusion

Today we learnt how to create a responsive navbar using css. You can use this code on your own website.

If you found this tutorial helpful, share it with your friends and developers group.

Demo Download

I spent several hours to create this tutorial, if you want to say thanks so like my page on Facebook and share it.

Facebook Official Page: T-Code Scripts

Related Tags:

  • responsive menu examples
  • responsive navbar codepen
  • responsive navbar with dropdown
  • hamburger menu css responsive
  • responsive navbar with logo
  • responsive navigation menu bootstrap
  • responsive navigation menu jquery
  • responsive navbar bootstrap

Leave a Reply

Your email address will not be published. Required fields are marked *