HomeHTML & CSSFree Responsive Navigation Menu Bar Using HTML & CSS

Free Responsive Navigation Menu Bar Using HTML & CSS

responsive navigation bar 

Responsive Navigation Bar Using HTML and CSS

The responsive navigation bar is a UI element in every webpage which has links to other sections of that webpage or website. Hello, everyone in this post I am going to teach you how to create a simple, easy and Responsive navigation bar by using only simple HTML and CSS programming codes. I have designed many kinds of navigation menu bars, before, such as side menu bars, overlay menu bars, and many other programming elements. The navigation menu I created in this blog post is very simple to use and generally designed.

In most cases, the navigation bar is placed horizontal form at the starting of the website page and in some cases, a horizontal navigation bar can not be fit on a web page. As you can on the above-given blog post image, each menu has a hover effect, meaning that when you hover or click on the menus, the color of the background will change. 

In this blog post (Free Responsive Navigation Menu Bar Using HTML, CSS), a navbar on the top of the website page, and in this navbar, there is a webpage logo on the left side and some important and mostly used navigation links on the right side of that navbar. On big devices like PC, laptops, these navigation links are placed in a horizontal form but on mobile devices and other small-screen devices, these links are placed in vertical form. This is a simple HTML and CSS coding project and I did not use JS code to create this responsive Navigation Bar.

Responsive Navigation Bar (Source Code)

First, you must create an HTML file with the name index.html and add the below given  HTML codes into your HTML file. You must have to create this file with a .html. Extension.

Second, create a new CSS file with the name of style.css and move the below-given codes in your CSS file. Remember, you have to create a file with .css Extensions.

 I have given below the all source codes, you can copy them by click on the copy codes button there. Add important font awesome link file in the head section of HTML code.

HTML:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
          <div class="nav">
        <input type="checkbox" id="nav-check">
        <div class="nav-header">
          <div class="nav-title">
            LOGO
          </div>
        </div>
        <div class="nav-btn">
          <label for="nav-check">
            <span></span>
            <span></span>
            <span></span>
          </label>
        </div>
        <div class="nav-links">
            <ul>
          <li><a href="#" target="_blank">Home</a></li>
          <li><a href="#" target="_blank">Portfolio</a></li>
          <li><a href="#" target="_blank">Services</a></li>
          <li><a href="#" target="_blank">About</a></li>
          <li><a href="#" target="_blank">Contact</a></li>
          <a class="icon">
            <i class="fa fa-twitter"></i>
            <i class="fa fa-linkedin"></i>
            <i class="fa fa-youtube"></i>
          </a>
            </ul>
        </div>
      </div>  

CSS:

            * {
    box-sizing: border-box;
  }

  body {
    margin: 0px;
    font-family: 'segoe ui';
  }

  .nav {
    height: 50px;
    width: 100%;
    background-color: #ff0000;
    position: relative;
  }

  .nav > .nav-header {
    display: inline;
  }

  .nav > .nav-header > .nav-title {
    display: inline-block;
    font-size: 22px;
    color: #fff;
    font-weight: 550;
    font-family: Arial, Helvetica, sans-serif;
    padding: 10px 10px 10px 10px;
  }

  .nav > .nav-btn {
    display: none;
  }

  .nav > .nav-links {
    display: inline;
    float: right;
    font-size: 18px;
  }
  .nav > .nav-links > ul li a{
    display: block;
    padding: 0 8px;
    color: #fff;
    line-height: 40px;
    font-size: 18px;
    text-decoration: none;

  }
  .nav > .nav-links > ul{
    padding: 0;
    margin-top: 5px;
    list-style: none;
    position: relative;

  }
  .nav > .nav-links > ul li{
    display: inline-block;
    background-color: #ff0000;


  }
  .nav > .nav-links > ul li:hover{
      background-color: #0b65af;
      border-radius: 5px;
  }

  .nav > #nav-check {
    display: none;
  }

 .nav .nav-links ul a.icon{
 margin-left: 80px;
 margin-right: 10px;
 }

 .nav .nav-links ul a i{
    background-color: #ff0000;
    border-radius: 50px;
    padding: 7px;
    margin-left: 5px;
 }


  @media (max-width:750px) {
    .nav > .nav-btn {
      display: inline-block;
      position: absolute;
      right: 0px;
      top: 0px;
    }
    .nav > .nav-btn > label {
      display: inline-block;
      width: 50px;
      height: 50px;
      padding: 13px;
    }
    .nav > .nav-btn > label:hover,.nav  #nav-check:checked ~ .nav-btn > label {
      background-color: rgba(0, 0, 0, 0.3);
    }
    .nav > .nav-btn > label > span {
      display: block;
      width: 25px;
      height: 10px;
      border-top: 2px solid #eee;
    }
    .nav > .nav-links {
      position: absolute;
      display: block;
      width: 100%;
      background-color: #333;
      height: 0px;
      transition: all 0.3s ease-in;
      overflow-y: hidden;
      top: 50px;
      left: 0px;
    }
    .nav > .nav-links > ul li a {
      display: block;
      width: 100%;
    }
      .nav > .nav-links > ul li{
        display: block;
        margin-bottom: 20px;
        padding: 0;
        background-color: #333;

      }
      .nav > .nav-links > ul li a{
          margin-left: 40%;
      }
      .nav .nav-links ul a.icon{
        margin-left: 33%;
      }
    .nav > #nav-check:not(:checked) ~ .nav-links {
      height: 0px;
    }
    .nav > #nav-check:checked ~ .nav-links {
      height: calc(100vh - 50px);
      overflow-y: auto;
    }
  }
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular