Responsive Nav Bar

 HTML CODE FOR NAV BAR :- 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function(){
            $('#icon').click(function(){
                $('ul').toggleClass('show');
          });
        });
    </script>

</head>
<link rel="stylesheet" href="nav.css">
<body>
    <nav>
        <label class="logo">BiplavMX</label>
        <ul>
            <li><a class="active" href="#">Home</a></li>
            <li><a href="#">About</a></li>
            <li><a href="#">Contact Us</a></li>
            <li><a href="#">Services</a></li>
        </ul>
        <label id="icon">
            <i class="fas fa-bars"></i>
        </label>
    </nav>
    <section></section>
    
</body>

</html>

CSS code for Nav bar
*{
    padding: 0%;
    margin: 0%;
    text-decoration: none;
    list-style: none;
}
body{
    font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif
}
nav{
    height: 80px;
    width: 100%;
    background: rgb(73, 2, 114);
}
label.logo{
    font-size: 35px;
    font-weight: bold;
    color: rgb(253, 253, 253);
    padding: 0px 100px;
    line-height: 80px;
}
nav ul{
    float: right;
    margin-right: 40px;
}
nav li{
    display: inline-block;
    margin: 0 8px;
    line-height: 80px;
}
nav a{
    color: white;
    font-size: 18px;
    text-transform: uppercase;
    border: 1px solid transparent;
    padding: 7px 10px;
    border-radius: 3px;
}
a.active,a:hover{
    border: 1px solid white;
    transition: 0.5s;

}
nav #icon{
    color: white;
    font-size: 30px;
    line-height: 80px;
    float: right;
   margin-right: 40px;
   cursor: pointer;
   display: none;
}
@media(max-width:1048px){

    label.logo{
        padding-left: 60px;
        font-size: 32px ;
    }
    nav ul{
        margin-right: 20px;
    }
    nav a{
        font-size: 17px;
    }

}
@media(max-width:909px){
    nav #icon{
        display: block;
    }
    nav ul{
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #2f3640;
        top: 80px;
        left: -100%;
        text-align: center;
        transition: all 0.5s;
    }
    nav li{
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }
    nav a{
        font-size: 20px;

    }
    a.active,a:hover{
        border: none;
        color: yellow;

    }
    nav ul.show{
        left: 0;
    }
}
section{
    background: url("https://cdn.pixabay.com/photo/2019/03/03/21/44/road-4032928_960_720.jpg") no-repeat;
    background-size: cover;
    height: calc(100vh - 80px);

}











Comments

Post a Comment