Home
Programming

Responsive Navbar only HTML & CSS

Syiainfoku make a Responsive Navbar only HTML & CSS
Responsive Navbar only HTML & CSS

Hello!

Today you will learn together on the Syiainfoku blog how to make Responsive Navbar no JavaScript pure HTML and CSS.

Okay, let's get started

Preview Responsive Navbar only HTML & CSS 

Preview Responsive Navbar only HTML & CSS

More or less the result will be like in the image above.

Source Code and Brief Explanation

First, create an HTML file with the name index.html and paste the given code in your HTML file. Remember, you must create a file with an .html extension.

<!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 Navbar #2 | hitoricoding</title>
    <link rel="stylesheet" href="./assets/style.css">
    <script src="https://kit.fontawesome.com/a076d05399.js"></script>
</head>

<body>
    <header>
        <nav>
            <input type="checkbox" id="check">
            <label for="check">
                <i class="fas fa-bars" id="btn"></i>
                <i class="fas fa-times" id="cancel"></i>
            </label>

            <img src="./images/logo.png" alt="Logo">
            
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Folower</a></li>
                <li><a href="#">Care</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </header>
    <main>
        <div class="banner">
            <h2>花 Sakura</h2>
        </div>
    </main>
</body>

</html>

Finally, create a CSS file with the name style.css and paste the given code in your CSS file. Remember, you must create a file with a .css extension.

@import url('https://fonts.googleapis.com/css2?family=Quicksand&family=Roboto&display=swap');

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

body {
    font-family: 'Roboto', sans-serif;
}

nav {
    height: 50px;
    background: #fdbacb;
}

nav img {
    width: 100px;
    position: absolute;
    top: 2px;
    left: 12%;
}

nav ul {
    float: right;
    margin-right: 25px;
}

nav ul li {
    line-height: 50px;
    list-style: none;
    display: inline-block;
    margin: 0px 20px;
}

nav ul li a {
    position: relative;
    color: #422f2f;
    font-size: 17px;
    padding: 2px 0px;
    text-decoration: none;
}

nav ul li a::before {
    position: absolute;
    content: '';
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #413838;
    transform: scaleX(0);
    transition: transform .3s linear;
}

nav ul li a:hover:before {
    transform: scaleX(1);
}

label #btn,
label #cancel {
    float: right;
    color: #422f2f;
    font-size: 25px;
    line-height: 50px;
    margin-right: 30px;
    cursor: pointer;
    display: none;
}

#check {
    display: none;
}

.banner {
    min-height: 100vh;
    background-image: url(../images/bg.jpg);
    background-size: cover;
    background-position: center;
}

.banner h2 {
    color: #f08ca5;
    font-size: 120px;
    letter-spacing: 5px;
    font-weight: 100;
    padding: 280px 0px 0px 100px;
    font-family: 'Quicksand', sans-serif;
}

@media screen and (max-width: 1118px) {
    nav img {
        left: 8%;
    }
}

@media screen and (max-width: 944px) {
    nav img {
        top: 5px;
        left: 6%;
        width: 85px;
    }

    nav ul li a {
        font-size: 16px;
    }

    .banner h2 {
        font-size: 100px;
        padding: 280px 0px 0px 50px;
    }
}

@media screen and (max-width: 860px) {
    label #btn {
        display: block;
    }

    ul {
        position: fixed;
        width: 100%;
        height: 100vh;
        background: #f5ccd6;
        top: 50px;
        left: -100%;
        text-align: center;
        transition: all .5s;
    }

    nav ul li {
        display: block;
        margin: 50px 0;
        line-height: 30px;
    }

    nav ul li a {
        font-size: 18px;
    }

    #check:checked~ul {
        left: 0;
    }

    #check:checked~label #btn {
        display: none;
    }

    #check:checked~label #cancel {
        display: block;
    }

}

@media screen and (max-width: 450px) {
    .banner h2 {
        font-size: 80px;
        padding: 100px 0px 0px 20px;
    }
}

That's it, now you have successfully created a Responsive Navbar only HTML & CSS, If your code is not working or you are facing any error/problem, please download the source code file from the given download button. It's free and a .zip file will be downloaded then you have to extract it.

Download 

Closing

Thank you for those of you who have read and downloaded this source code, hopefully it can be useful and add to your insight.

If you found this article useful, you can share it. That's all from me, and THANK YOU

Post a Comment