Home Html CSS Tutorial How to Create Responsive Navigation Menu Bar Using Html and CSS

How to Create Responsive Navigation Menu Bar Using Html and CSS

1695
1

Responsive Navigation Menu Bar Design using only HTML & CSS

Hi everyone, we are going to learn how to create a Responsive Navigation Menu Bar By using only HTML and CSS

What is Navigation Menu Bar?

Fundamentally, a navigation menu bar is an organized list of links to other web pages, usually internal pages. Navigation menus appear most commonly in page headers or sidebars across a website page, allowing visitors to quickly access the most useful pages. One more principle reason for the navigation bar is to make the user’s access helpful page and make life easier on all screen devices.

From the above-given UI design of this Navbar Menu. On the desktop format, our navigation bar is on top which is a horizontal bar.  And while on mobile and tablet is navigation bar hidden under the icon menu

How do I create a simple navigation bar in HTML and CSS?

Here is a full video tutorial of this code which is given below, which will allow you to understand this coding of the Responsive Navigation Menu Bar.

Create Responsive Navigation Menu Bar in HTML CSS [Video Tutorial below]

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>responsive navigation menu bar using html & css</title>
    <link rel="stylesheet" href="style.css" />
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    
  </head>
  <body>
    <div class="header">
      <input type="checkbox" id="check" />
      <label for="check" class="checkbtn">
        <i class="fas fa-bars" id="openbtn"></i>
      </label>

      <div class="logo">Next Coding</div>
      <ul>
        <li><a href="#" class="active">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Contact</a></li>
      </ul>

    </div>

    <div class="main">

    </div>
  </body>
</html>

You Might Like This

CSS

/* #FF155C
#7DA4AC
*/

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
  box-sizing: border-box;
}

body{
  font-family: Verdana, Geneva, Tahoma, sans-serif;
}

.header{
  background:  #FF155C;
  width: 100%;
  height: 80px;
padding: 0 60px;
}

.logo{
  color: #f2f2f2;
  font-size: 25px;
  font-weight: bold;
  display: inline-block;
  line-height: 80px;
}
.active{
  background: #7DA4AC;
  border-radius: 5px;
}

ul{
  display: inline-block;
  position: absolute;
  right: 0;
  line-height: 80px;
  padding: 0 60px;
}

ul li{
  display: inline-block;
}

ul li a{
  text-decoration: none;
  color: #ffffff;
  font-size: 18px;
  margin-right: 10px;
  padding: 10px 20px;
}

ul li a:hover{
  background: #7DA4AC;
  border-radius: 5px;
  transition: .02s;
}

/*  mobile icon bars */
#check{
  display: none;
}

.checkbtn{
  font-size: 30px;
  color: #ffffff;
  position: absolute;
  right: 20px;
  top: 20px;
  display: none;
}

/* main content section */
.main{
  background-image: url("bg.jpg");
  height: 100vh;
  background-position: center;
  background-size: cover;
}

/* Responsive Mobile section */
@media screen and (max-width:960px){
  .header{
    padding: 0 30px;
  }

  .logo{
    font-size: 20px;
  }

  ul{
    position: fixed;
    top:80px;
    right: 0;
    background: #7DA4AC;
    width: 100%;
    height: 100vh;
    text-align: center;
    left: -100%;
    transition: 0.5s;


  }

  ul li {
    display: block;
  }

  ul li a:hover{
    color: #FF155C;
  }

  .checkbtn{
    display: block;
  }

  #check:checked ~ ul
{
  left: 0;
}}

Subscribe to My Youtube Channel Here

(Visited 1,134 times, 1 visits today)

1 COMMENT

LEAVE A REPLY

Please enter your comment!
Please enter your name here