Responsive Navigation Bar using Only HTML and CSS

-

Responsive Navigation Bar




NavBar Demo 👇

(Try to adjust your screen size to see responsiveness, Thank You!)


NavBar



HTML:



<!--RESPONSIVE NAVBAR-->


<!DOCTYPE html>

<html lang="en" dir="ltr">

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>NavBar</title>

    <link rel="stylesheet" href="styles.css">

    <script src="https://kit.fontawesome.com/a076d05399.js"></script>

</head>

<body>

    <label for="logo"> <a href="#home" class="logo">LOGO</a> </label>

    <nav class="navbar">

        <input type="checkbox" id="check">

        <label for="check" class="bar">

            <i class="fas fa-bars"></i>

        </label>

        <ul>

            <li> <a href="#" class="active">HOME</a> </li>

            <li> <a href="#">ABOUT</a> </li>

            <li> <a href="#">SKILLS</a> </li>

            <li> <a href="#">GALLERY</a> </li>

            <li> <a href="#">CONTACT ME</a> </li>

        </ul>

    </nav>

</body>

</html>




CSS:





body{

  padding: 0;

  margin: 0;

  background-color: #333;

  color: #fff;

}

 

a{

  color: #fff;

  text-decoration: none;

}

 

label .logo{

  position: absolute;

  font-size: 2rem;

  font-weight: bold;

  padding: 5px;

  margin-left: 10%;

  line-height: 68px;

}

 

.navbar{

  background-color: #111;

  width: 100%;

  height: 72px;

}

 

.navbar ul{

  position: absolute;

  right: 0;

  margin-right: 10%;

}

 

.navbar ul li{

  float: left;

  font-size: 18px;

  list-style: none;

  padding: 18px;

}

 

a.active, a:hover{

  border-bottom: 2px solid #1bac91;

  transition: 0.5s ease-in-out 0.3s;

}

 

.bar{

  float: right;

  margin-right: 50px;

  display: none;

}

 

#check{

  display: none;

}

 

 

@media (max-width: 768px) {

 .navbar ul li{

    float: none;

    position: relative;

    background-color: #f1f1f1;

    padding: 5%;

  }

 

  .navbar a{

    color: #444;

    line-height: 20px;

  }

 

  .navbar ul{

    width: 100%;

    background-color: transparent;

    padding: 5%;

    left: -100%;

    box-sizing: border-box;

    margin-top: 72px;

    right: 25%;

  }

 

  a.active, a:hover{

    color: #000;

  }

 

  .bar{

    font-size: 25px;

    color: white;

    display: block;

    line-height: 68px;

    margin-left: 80%;

    padding: 5px;

    cursor: pointer;

  }

 

  #check:checked~ul{

    left: 0;

  }

            }



*If you have any background image or text and the navigation bar is opening behind it in mobile/tablet view try to use z-index in ul.

See the video for this navigation bar: https://youtu.be/4z5IfhluKYU


If you think it is informative for the young developers then share this blog, like the video subscribe and stay tuned for the upcoming blogs and videos.


Muchas Gracias!



Comments

Post a Comment

Popular posts from this blog

MOTIVATION SOLUTION IN C LANGUAGE | CODECHEF | IMDB

-
Motivation Problem Code:   IMDB Chef has been searching for a good motivational movie that he can watch during his exam time. His hard disk has   X  GB of space remaining. His friend has  N  movies represented with  ( S i , R i )  representing (space required, IMDB rating). Help Chef choose the single best movie (highest IMDB rating) that can fit in his hard disk. . In put The first line of the input contains a single integer T  denoting the number of test cases. The description of T  test cases follows. The first line of each test case contains two space-separated integers  N  and X . N  lines follow. For each valid i , the  i -th of these lines contains two space-separated integers  S i  and  R i . Output For each test case, print a single line containing one integer - the highest rating of an IMDB movie which Chef can store in his hard disk. Cons traints 1 ≤ T ≤ 10 1 ≤ N ≤ 5 ⋅ 10 4 1 ≤ X ≤ 10 9 1 ≤ S i , ...
Read more

ATM solution in C language.- Codechef

-
  ATM Problem Code:  HS08TEST Pooja would like to withdraw  X  $US from an ATM. The cash machine will only accept the transaction if  X  is a multiple of 5, and Pooja's account balance has enough cash to perform the withdrawal transaction (including bank charges). For each successful withdrawal the bank charges 0.50 $US. Calculate Pooja's account balance after an attempted transaction. Input Positive integer 0 <  X  <= 2000 - the amount of cash which Pooja wishes to withdraw. Nonnegative number 0<=  Y  <= 2000 with two digits of precision - Pooja's initial account balance. Output Output the account balance after the attempted transaction, given as a number with two digits of precision. If there is not enough money in the account to complete the transaction, output the current bank balance. Example - Successful Transaction Input: 30 120.00 Output: 89.50 Example - Incorrect Withdrawal Amount (not multiple of 5) Input: 42 12...
Read more

Compare the Triplet | HackerRank | Solution in C

-
  Compare the Triplet Alice and Bob each created one problem for HackerRank. A reviewer rates the two challenges, awarding points on a scale from  1  to  100  for three categories:  problem clarity ,  originality , and  difficulty . The rating for Alice's challenge is the triplet  a = (a[0], a[1], a[2]) , and the rating for Bob's challenge is the triplet  b = (b[0], b[1], b[2]) . The task is to find their  comparison points  by comparing  a[0]  with  b[0] ,  a[1]  with  b[1] , and  a[2]  with  b[2] . If  a[i] > b[i] , then Alice is awarded  1  point. If  a[i] < b[i] , then Bob is awarded  1  point. If  a[i] = b[i] , then neither person receives a point. Comparison points is the total points a person earned. Given  a  and  b , determine their respective comparison points. Example a = [1, 2, 3] b = [3, 2, 1] For elements *0*, Bob ...
Read more