Responsive Mobile Navigation using HTML CSS

Hey, developer today is Day 64 of our 90Projects in 90Days. So on Day-64, we are going to Create a Responsive Mobile Navigation using HTML CSS.

To run the given code firstly you have to copy the HTML code and run it into your code editor and then create a CSS file and paste the given CSS code in your code's CSS file.

Preview

responsive navbar using html and css, responsive navigation bar, responsive navigation bar template, navigation bar html css,


HTML Code

index.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">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.3.0/css/all.min.css"
        integrity="sha512-SzlrxWUlpfuzQ+pcUCosxcglQRNAq/DZjVsC0lE40xsADsfeQoEypE+enwcOiGjk/bSuGGKHEyjSoQ1zVisanQ=="
        crossorigin="anonymous" referrerpolicy="no-referrer" />
    <link rel="stylesheet" href="style.css" />
    <title> Mobile Tab Navigation </title>
</head>
<body>

    <nav class="navigation">
        <div class="desktop">
            <h2> Geeks Help </h2>
            <ul>
                <li class="active"><a href="#"> Home </a></li>
                <li><a href="#"> Services </a></li>
                <li><a href="#"> Bookmarks </a></li>
                <li><a href="#"> Account </a></li>
            </ul>
        </div>
        <hr>
        <div class="phone">
            <ul>
                <li class="active">
                    <i class="fa-solid fa-house"></i>
                    <a href="#">Home</a>
                </li>
                <li>
                    <i class="fa-solid fa-rocket"></i>
                    <a href="#"> Services </a>
                </li>
                <li>
                    <i class="fa-solid fa-book-bookmark"></i>
                    <a href="#"> Bookmarks </a>
                </li>
                <li>
                    <i class="fa-solid fa-user"></i>
                    <a href="#"> Account </a>
                </li>
            </ul>
        </div>
    </nav>

</body>
</html>


CSS Code

style.css

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: sans-serif;
}

body {
    background-color: #2e2333;
}

.navigation {
    display: flex;
    color: #fff;
    align-items: center;
    flex-direction: column;
    justify-content: space-around;
}

.desktop {
    width: 100%;
    display: flex;
    align-items: center;
    padding: 1.2rem 5rem;
    justify-content: space-between;
}

.desktop h2 {
    font-size: 27px;
}

.desktop ul {
    display: flex;
    list-style: none;
}

.desktop ul li {
    opacity: 0.6;
}

.desktop ul li:hover {
    opacity: 1;
}

.desktop ul li a {
    color: #fff;
    padding: 7px 10px;
    text-decoration: none;
}

hr {
    width: 100%;
    opacity: 0.2;
}

.phone {
    display: none;
}

@media screen and (max-width: 640px) {
    .desktop {
        display: none;
    }

    .phone {
        display: flex;
        position: absolute;
        bottom: 10px;
    }

    .phone ul {
        display: flex;
        list-style: none;
        justify-content: space-around;
        width: 100%;
    }

    .phone ul li {
        cursor: pointer;
        margin: 5px 10px;
        opacity: 0.2;
    }

    .phone ul li:hover {
        opacity: 1;
    }

    .phone ul li a {
        text-decoration: none;
        color: #fff;
        margin-left: 10px;
    }

    hr {
        position: absolute;
        bottom: 50px;
        width: 100%;
        color: #fff;
    }
}

@media screen and (max-width: 445px) {
    .phone ul li {
        display: flex;
        margin: 5px 10px;
        flex-direction: column;
        align-items: center;
        row-gap: 10px;
    }

    .phone ul li a {
        margin-left: 0px;
    }

    .phone ul li a,
    .phone ul li i {
        font-size: 13px;
    }

    hr {
        position: absolute;
        bottom: 65px;
        width: 100%;
        color: #fff;
    }
}

Learn HTML- Learn Now

Learn CSS- Learn Now

Visit our 90Days, 90Projects Page- Visit Now

Post a Comment

0 Comments
* Please Don't Spam Here. All the Comments are Reviewed by Admin.

Top Post Ad

Below Post Ad