Design Responsive Navbar | How to design responsive navbar using HTML CSS and Javascript

Design Responsive Navbar | How to design responsive navbar using HTML CSS and Javascript

Design Responsive Navbar | How to design responsive navbar using HTML CSS and Javascript


Learners, You have often a header with a logo and some left-aligned text such as Home, Feature, etc. This is our navbar. This is one of the main ingredients of every website. If you don't know How we can design so just join me on this blog and make sure your finger is free for scrolling down πŸ˜‰.


Hey learners..!

Welcome to our 🎊 today's blog with code with random. In this blog, we gonna learn how we can design a popup login form.

I hope you must have got an idea about the project.


Let's have a look at our project.
Design Responsive Navbar | How to design responsive navbar using HTML CSS and Javascript

We are going to design it responsive as well means the device is adjustable Let's have a look at how it will preview on the mobile device.
Design Responsive Navbar | How to design responsive navbar using HTML CSS and Javascript




HTML SECTION 

Here I'm not going to add a structure of the HTML file from scratch, I will just paste the body part, it is so because the body is the main part of our designing a browser.


We have the following part in the HTML section.
  • First, we have a button toggle btn and with right side logo text and some list item in un order list.
Go through the below code πŸ‘‡ and run it in your IDE or where you used to design just HTML without CSS styling.



 <nav>  
  <input type="checkbox" id="check">  
  <label for="check" class="checkbtn">  
   <i class="fas fa-bars"></i>  
  </label>  
  <label for="" class="logo">CodeWave</label>  
  <ul>  
   <li><a href="#" class="active">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>  

CSS SECTION 


By CSS we will design our logo text and list item as it will get set on left.
with help of a media query we will also set it for device adjustable.


The Below code will analyze you moreπŸ‘‡. So just add in your HTML half complete file and wait to watch some magic.



 @import url("https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css");  
 * {  
  margin:0;  
  padding:0;  
  box-sizing: border-box;  
  text-decoration:none;  
  list-style:none;  
 }  
 body {  
  font-family:montserrat;  
 }  
 nav {  
  height:80px;  
  background: #0082e6;  
  width:100%;  
 }  
 label.logo {  
  color:white;  
  line-height:80px;  
  font-size: 35px;  
  padding:0 100px;  
  font-weight:bold;  
 }  
 nav ul {  
  float: right;  
  margin-right:20px;  
 }  
 nav ul li {  
  line-height:80px;  
  display:inline-block;  
  margin:0 5px;  
 }  
 nav ul li a {  
  text-transform:uppercase;  
  font-size: 16px;  
  color: white;  
  padding:7px 13px;  
  border-radius:3px;  
 }  
 a.active,a:hover {  
  background: #1b9bff;  
  transition:0.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:952px) {  
  label.logo {  
   font-size:30px;  
   padding-left:50px;  
  }  
  nav ul li a {  
   font-size:16px;  
  }  
 }  
 @media (max-width:858px) {  
  .checkbtn {  
   display:block;  
  }  
  ul {  
   position: fixed;  
   height:100vh;  
   width:100%;  
   background: #2c3e50;  
   top:80px;  
   left:-100%;  
   text-align:center;  
   transition: all .5s;  
  }  
  nav ul li {  
   display:block;  
   line-height:30px;  
   margin:50px 0;  
  }  
  nav ul li a {  
   font-size: 20px;  
  }  
  a.active,a:hover {  
   background:none;  
   color: #0082e6;  
  }  
  #check:checked ~ ul {  
   left:0;  
  }  
 }  
 section {  
  background:#2c3e50;  
  height:86vh;  
 }  

For live preview you can follow below codepen..
 

See the Pen responsive navbar in html css. by Ankit kumar (@Kumar-Ankit56) on CodePen.


By this blog... 
We have learned how we can design a responsive navbar.
Now I'm looking for your reviews.
So, How was the blog 😁, Learners!

If you want a more crisp blog like this then please check our Blogs sites CodewithRandom. keep tuned with us because every day you will learn something new here.😊

I hope that I'm able to make you understand this topic and you have learned something new from this blog. If you faced any difficulty feel free to drop a comment down your problems and if you liked it, please show your love in the comment section. This fills blogger hearts with enthusiasm for writing more and new blogs.

You can follow me on Instagram 

Written by @Ankit kumar
 


Post a Comment

Previous Post Next Post