Home ›Html and Css ›Responsive Navigation Bar Using Html and Css
MASIGNASUKAv102
6510051498749449419

Responsive Navigation Bar Using Html and Css

Responsive Navigation Bar Using Html and Css
Add Comments
Sunday, January 15, 2023

Hello friends how are you ?

In this blog we will discuss how to create a attractive and responsive navigation  bar with the help of HTML and CSS. The most  important thing on this post that this navigation bar is fully responsive. If you want to learn about basic html then you visit my website. 


What is navigation bar ?

Navigation bar is a most important part of any website because with the help of navigation bar we can move one page to another page so we can design a responsive navigation bar using html and css. In navigation bar , we can add multiple page through the anchor tag. 


If you are regular viewer of my website then you know that we will provide a very simple and very easy code who understandable for you. Earlier I uave shared on article on Responsive contact us page using html and css and now we create a navigation bar using html and css. 


There are many  navigation bar tampletes available  in the internet but mostly the are paid or make with the help of bootstrap but this navigation bar fully free and without using bootstrap. 


In my blog you also find a responsive registration form using HTML and css,  responsive contact us page, responsive about us page,  responsive login page and many more. This web page are free for use and code is very easy. 


In case you're novice and a bit little of HTML and CSS then codes and concept of this responsive navigation menu bar will genuinely help you to understand HTML and CSS more. That is a very simple responsive navigation bar with few and smooth codes. 

Responsive Navigation Bar Using Html and Css

Below I have provide a preview of navigation bar. You can see this navigation bar looking good . I have provided responsive navigation bar you can see in preview image . Below i have provided code of navigation menu bar which is designed by using the html and css. Just scroll and copy code and use it now. 




Now we write a code of responsive navigation bar

In this navigation bar, as you see in the above image, there is a list of navigation( web pages)  show in a horizontal and logo of your company is show in the left hand side. We add a five pages in this navigation bar and all this webpages code are also available in my website who is free.  you can search this webpage in search bar and use this pages. 
In this blog, most thing is this navigation bar is fully responsive for all devices. 



You can also learn 

For creating a navigation bar you need to create two different file we can also write this code in same page but then you use style tag under head tag for writing a css code if you want write separate code then you need to create a two files . One is html file for designing a structure of navigation bar and another is css file for styling a structure of navigation bar. 


index.html


First, create a html file index.html with the .html extension and  copy this given code and paste in this file.  Here we use html for creating a structure of navigation bar. With the help of html you can create a many form. 

<html>
<head>
   <title>Responsive Navbar</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/>


</head>
<body>
 
      
   <div class="nav">
      <input type="checkbox" id="check">
      <label for="check"  class="bar">
        <i class="fas solid fa-bars"></i>
      </label>
     <span>Logo</span>

       <ul>
          <li><a href="">Home</a></li>
          <li><a href="">About</a></li>
          <li><a href="">Gallery</a></li>
          <li><a href="">Contact </a></li>
          <li><a href="">Login</a></li>
       </ul>
   </div>

</body>

</html>




style.css


The basic structure of navigation bar is ready so we can styling this navigation bar using css. Second, create a css file style.css with the .css extension and copy this given code and paste in this file. We use css for styling a structure of navigation bar. With the help of css we can give more style and more attractive  for any web page.

*{
    margin: 0;
    padding: 0;
    text-decoration :none; 
}
body{
    background-color: blanchedalmond;   
}
.nav{
    background-color: blueviolet;
     
    height:65px;
    }
.nav ul{
float:right;
margin:15px;
}
span{
font-size :35px;
color:#fff; 
float:left;
margin:12px;
}
.nav ul li{
    
    display: inline;
    text-align: center;
    padding-left: 20px;
    font-size:25px;
    color:aliceblue;
    margin-left :5px; 
}
a{
   color:white;
}
a:hover{
   background :white; 
   color:black;
   padding :7px; 
   border-radius :7px;
   }

#check{
   display :none; 
   }
.bar{
   font-size: 30px;
   color: white;
   float: right;
   display: none;
   margin:15px;
  }

@media (max-width: 952px)
{
  .bar{
      display: block;
      }
.nav ul{  
      width: 100%;
      height: 100vh;
      background: black;
      position: fixed;
      left: -120%;
      margin:65px 0;
      transition :0.62s;
     }
.nav ul li{
      display: block;
      margin: 50px 0;
     } 
  #check:checked ~ul{
     left:0;
    }
}

Note:  index.html file and style.css file must be in a same folder if you change a path of any file then you also change a path in code. If you don't change in code then you face some issues for styling a structure of navigation bar. 

We also provide many attractive and responsive web  pages  with free source code and this provides code is very easy and understandable you must visit my website for all this and contact us through the social media pages. You can also follow us on instagram, YouTube and facebook. 

If you want to any project and any portfolio  website you contact with us we definitely provide a project with source code. We also provide a portfolio website, colleges project and many web pages. 

Thank so much you for visiting my website and give your love and support. 
If you have any query related to any post on this website  please comment and contact or if you give any suggestions so please comment.

MCA Waala

comment 0 comments

more_vert