We use cookies to ensure that we give you the best experience on our website.

CSS Responsive Navigation bar with Logo

How to make CSS Responsive Navigation bar with Logo?

In this tutorial, you will learn how to create a simple Responsive header navigation bar with a logo using pure HTML, CSS, and JavaScript.

Click the following button to see the demo of this responsive navbar –

Live Demo

Markup (HTML) code of the responsive navbar with logo

<!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>CSS Responsive Navigation Bar - Devbabu.Com</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <header>
        <div class="wrapper">
            <div class="logo">
                <a href="#"><img src="logo.png" alt="DevBabu.com"></a>
            </div>
            <div class="navbar">
                <div class="close-nav"><button>×</button></div>
                <nav>
                    <ul>
                        <li><a href="#">Home</a></li>
                        <li><a href="#">Blog</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </nav>
            </div>
            <div class="menu-bar">
                <button><i></i></button>
            </div>
        </div>
    </header>
    <div class="container">
        <!-- Content -->
    </div>
    <script>
        const theBody = document.querySelector('body');
        const openNav = document.querySelector('.menu-bar button');
        const closeNav = document.querySelector('.close-nav button');
        const Navbar = document.querySelector('.navbar');

        // function bodyScroll(){
        //     if(Navbar.classList.contains('show')){
        //         theBody.classList.add('hide-scroll');
        //     }
        //     else if(theBody.classList.contains('hide-scroll')){
        //         theBody.classList.remove('hide-scroll');
        //     }
        // }

        function showHide(){
            Navbar.classList.toggle('show');
            // bodyScroll();
        }

        openNav.onclick = showHide;
        closeNav.onclick = showHide;
    </script>
</body>
</html>

CSS code (style.css)

@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
*,
*::before,
*::after {
    box-sizing: border-box;
    line-height: 1.5em;
}

html {
    font-size: 16px;
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-family: "Open Sans", sans-serif;
    background-color: #f7f7f7;
}

header {
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
        0 4px 6px -4px rgba(0, 0, 0, 0.1);
    padding: 10px 20px;
}
header .wrapper {
    max-width: 1000px;
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
}
header .logo img {
    height: 50px;
    display: block;
}

.navbar {
    position: fixed;
    top: 0;
    left: 100%;
    margin: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    padding: 20px;
    transition: left 0.3s;
}

.navbar.show {
    left: 0 !important;
}

.hide-scroll {
    overflow: hidden;
}

.navbar ul {
    all: unset;
    list-style-type: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 25px;
}
.navbar ul a {
    all: unset;
    color: #444444;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: bold;
    font-size: 28px;
}
.navbar ul a:hover {
    color: #111111;
    text-decoration: underline overline;
    text-decoration-thickness: 3px;
}

.close-nav {
    text-align: right;
    margin-bottom: 20px;
}
.close-nav button {
    all: unset;
    background: #f7f7f7;
    font-size: 42px;
    cursor: pointer;
    border: 1px solid rgba(0, 0, 0, 0.2);
    padding: 15px;
    border-radius: 3px;
    color: #444444;
}
.close-nav button:hover {
    color: #222222;
    background: white;
}

.menu-bar button {
    border: 1px solid rgba(0, 0, 0, 0.1);
    background: #f7f7f7;
    height: 50px;
    width: 50px;
    padding: 5px 10px;
    cursor: pointer;
    border-radius: 3px;
}
.menu-bar i {
    display: block;
    border-top: 3px solid #444444;
    border-bottom: 3px solid #444444;
}
.menu-bar i::after {
    display: block;
    content: "";
    border-top: 3px solid #444444;
    margin: 6px 0;
}
.menu-bar button:hover {
    background: white;
}
.menu-bar button:hover i {
    border-color: #222222;
}

.container {
    max-width: 900px;
    margin: 0 auto;
    padding: 30px;
}

@media (min-width: 550px) {
    .navbar {
        all: unset;
        display: block;
    }
    .navbar ul {
        flex-direction: row;
        gap: 20px;
    }
    .navbar ul a {
        font-size: inherit;
    }
    .close-nav,
    .menu-bar {
        display: none;
    }
}

Related Posts