Create A Full Responsive Navigation Menu In HTML & CSS

On a website, a navigation menu 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, allowing visitors to quickly access the most useful pages.

By responsive menus, we mean quite simply navigation menus whose presentation or behavior is altered on different devices and screen widths. There are various approaches to achieving this, whether by using CSS or other languages such as PHP. In this article, we’ll look at what can be done with CSS media queries.

HTML:

<!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>navbar</title>
    <link rel="stylesheet" href="style.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>

    <nav>

        <input type="checkbox" id="check">
        <label for="check" class="chkbtn">
            <i class="fa fa-bars"></i>
        </label>
        <div class="logo">
            <h1>LOGO</h1>
        </div>
        <ul>
            <li><a href="#" class="active">home</a></li>
            <li><a href="#">about</a></li>
            <li><a href="#">contact</a></li>
            <li><a href="#">blogs</a></li>
            <li><a href="#">feedback</a></li>
        </ul>
    </nav>
    
    <div class="content">
        <h1>Responsive navbar</h1>
        <p>create full responsive navbar in html & css</p>
    </div>
</body>
</html>

CSS

@import url('https://fonts.googleapis.com/css2?family=Montserrat&display=swap');
body{
    padding: 0;
    margin: 0;
    font-family: 'Poppins', sans-serif;
    background-color: #fff;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav{
    position: fixed;
    width: 100%;
    height: 75px;
    background-color: #fff;
    padding: 0 80px;
    line-height: 75px;
}

nav .logo{
    float: left;
}

nav .logo h1{
    font-size: 40px;
    letter-spacing: 5px;
    font-weight: bold;
    color: #010141;
}

nav ul {
    float: right;
}

nav ul li{
    list-style: none;
    display: inline-block;
}

nav ul li a{
    text-decoration: none;
    font-size: 17px;
    text-transform: uppercase;
    padding: 0 20px;
    color: #010141;
    cursor: pointer;
}

nav .active{
    color: #13138b;
}

.content{
    background-color: #010141;
    color: #fff;
    height: 100vh;
    width: 100%;
    padding: 15%;
    text-align: center;
}

.content h1{
    font-size: 60px;
    text-transform: uppercase;
    letter-spacing: 4px;
}

.content p{
    top: 20px;
    letter-spacing: 4px;
    font-size: 30px;
}

.chkbtn{
    color: #010141;
    font-size: 25px;
    cursor: pointer;
    float: right;
    display: none;
}

#check{
    display: none;
}

@media screen and (max-width: 1000px){

    nav{
        padding: 0 50px;
    }

    .chkbtn{
        display: block;
    }

    nav .logo h1{
        font-size: 30px;
    }

    nav ul{
        width: 100%;
        height: 100vh;
        position: fixed;
        background-color: rgb(4, 4, 40);
        top: 75px;
        left: -100%;
        text-align: center;
        transition: 0.5s ease;
    }

    nav ul li{
        display: block;
        margin: 60px 0;
        line-height: 20px;
    }

    nav ul li a{
        color: #fff;
    }
    
    #check:checked ~ ul{
        left: 0;
    }
}

1 Comment

Leave a Reply

For News Subscribe Us!

Can curiosity may end shameless explained. True high on said mr on come. An do mr design at little myself wholly entire though. Attended of on stronger or mr pleasure.

You have been successfully Subscribed! Ops! Something went wrong, please try again.

© 2022 Code With AM