How To Create A Navigation Bar In HTML And CSS

In this article, we will create a responsive navigation bar using HTML and CSS.Then we should follow the steps given below.Follow these simple steps, we can easily create a navigation bar in HTML and CSS.

First we need to create the HTML file to make a navigation bar.

Write this code in HTML file to make the structure of navbar.

ADD HTML

<div class="navbar">
   <input type="checkbox" id="nav-check">
   <div class="nav-header">
      <!-- Your Logo Or Title -->
      <div class="nav-title">
         KrTricks
      </div>
   </div>

   <!-- Navbar Menu Icon -->
   <div class="nav-btn">
      <label for="nav-check">
      <span></span>
      <span></span>
      <span></span>
      </label>
   </div>

   <!-- Navbar Links -->
   <div class="navbar-links">
      <a href="#" >Home</a>
      <a href="#" target="_blank">HTML</a>
      <a href="" >CSS</a>
      <a href="#" >JavaScript</a>
      <a href="#" >PHP</a>
   </div>
</div>

Now after making the structure of navbar we will give it a different look & design by using CSS style sheet in it and make it responsive for all devices.

You can create a CSS file or use <style> tag to design the navbar.

ADD CSS

* {
box-sizing: border-box;
}
body {
margin: 0px;
font-family: 'segoe ui';
}
.navbar {
height: 50px;
width: 100%;
background-color: #10344f;
position: relative;
}
.navbar > .nav-header {
display: inline;
}
.navbar > .nav-header > .nav-title {
display: inline-block;
font-size: 22px;
color: #fff;
padding: 10px 10px 10px 10px;
}
.navbar > .nav-btn {
display: none;
}
.navbar > .nav-links {
display: inline;
float: right;
font-size: 18px;
}
.navbar > .nav-links > a {
display: inline-block;
padding: 13px 10px 13px 10px;
text-decoration: none;
color: #efefef;
}
.navbar > .nav-links > a:hover {
background-color: rgba(0, 0, 0, 0.3);
}
.navbar > #nav-check {
display: none;
}
<!-- Adding media query for making the navbar responsive -->
@media (max-width:600px) {
.navbar > .nav-btn {
display: inline-block;
position: absolute;
right: 0px;
top: 0px;
}
.navbar > .nav-btn > label {
display: inline-block;
width: 50px;
height: 50px;
padding: 13px;
}
.navbar > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
background-color: rgba(0, 0, 0, 0.3);
}
.navbar > .nav-btn > label > span {
display: block;
width: 25px;
height: 10px;
border-top: 2px solid #eee;
}
.navbar > .nav-links {
position: absolute;
display: block;
width: 100%;
background-color: #061b2b;
height: 0px;
transition: all 0.3s ease-in;
overflow-y: hidden;
top: 50px;
left: 0px;
}
.navbar > .nav-links > a {
display: block;
width: 100%;
}
.navbar > #nav-check:not(:checked) ~ .nav-links {
height: 0px;
}
.navbar > #nav-check:checked ~ .nav-links {
height: calc(100vh - 50px);
overflow-y: auto;
}
}

Output

HTML CSS navbar

Leave a Comment

Your email address will not be published.