To Create Responsive Navigation Bar using HTML and CSS

 

To Create Responsive Navigation Bar using HTML and CSS


html and css coding :

html coding:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Responsive Design</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://kit.fontawesome.com/edb03cc913.js" crossorigin="anonymous"></script>
</head>
<body background="bbgrd.jpeg">
  
    <nav>
        <input type="checkbox" id="check">
        <label for="check" class="checkbtn">
            <i class="fas fa-bars"></i>
        </label>
        <label class="logo">SoloKingDesigner</label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Services</a></li>
            <li><a href="#">Feeback</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>
    <section></section>
</body>
</html>

CSS coding:

*{
    padding0;
    margin0;
    text-decorationnone;
    box-sizingborder-box;
}
body{
    font-familysans-serif;
}
nav{
    background#0082e6;
    height80px;
    width100%;
}
label.logo{
    colorwhite;
    font-size35px;
    line-height80px;
    padding0 100px;
    font-weightbold;
}
nav ul{
    floatright;
    margin-right20px;
}
nav ul li{
    displayinline-block;
    line-height80px;
    margin0 5px;
}
nav ul li a{
    colorwhite;
    font-size17px;
    text-transformuppercase;
    padding7px 13px;
    border-radius3px;
    
}
a.active,a:hover{
    background#1b9bff;
    transition.5s;
}
.checkbtn{
    font-size30px;
    colorwhite;
    floatright;
    line-height80px;
    margin-right40px;
    cursorpointer;
}
#check{
    displaynone;
}
@media (max-width952px){
    label.logo{
        font-size30px;
        padding-left50px;
    }
    nav ul li a{
        font-size16px;}
    }
    @media (max-width858px){
        .checkbtn{
            displayblock;
        }
        ul{
            positionfixed;
            width100%;
            background#2c3e50;
            top80px;
            left-100%;
            text-aligncenter;
            transitionall .5s;
        }
        nav ul li{
            displayblock;
            margin50px 0;
            line-height30px;

        }
        nav ul li a{
            font-size20px;
        }
        a:hovera.active{
            backgroundnone;
            color#0082e6;
        }
        #check:checked ~ ul{
            left0;
        }
        section{
            backgroundurl(bbgrd.jpegno-repeat;
            background-sizecover;
            heightcalc(100vh - 80px);
        }







Watch a complete video and learn that how to make a responsive navigation bar with the help of html and CSS