CSS responsive navigation menu with logo

Featured image of CSS responsive navigation menu with logo

Learn how to create css responsive navigation menu with logo

In this tutorial we are going to create css responsive navigation menu with logo.

This tutorial will provide a basic knowledge about creating a responsive web page using CSS media queries and JavaScript.

To create this css responsive navigation menu we will use HTML CSS and JavaScript, we’ll not use any library or framework to make it. So let’s start to create this –

#Getting started
First we will create a HTML file for layout you can call this file index.html
#index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS responsive navigation menu</title>
</head>

<body>
</body>
<nav class="navbar">
    <div class="container">
        <section class="_Logo"><img src="logo.png"></section>
        <section class="_Iconbar">
            <span class="menu-bar" onclick="showHide()">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </span>
        </section>
        <section class="_Menus" id="nav-lists">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </section>
    </div>
</nav>
</html>

Without CSS our page layout looks like this image.
#without css
without css page layout


After that we’ll create a CSS stylesheet to make our layout beautiful and responsive.

#CSS stylesheet

*,
*::before,
*::after {
    box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

body {
    padding: 0;
    margin: 0;
    background-color: #f7f7f7;
    font-family: sans-serif;
}

.navbar {
    width: 100%;
    background-color: #000;

}

.container {
    max-width: 1140px;
    margin: 0 auto;
    height: 60px;
    display: flex;
    flex-wrap: wrap;

}

._Logo {
    overflow: hidden;
    text-align: center;
    flex-basis: 200px;
}

._Logo img {
    height: 100%;
}

._Menus ul {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;
    flex-wrap: wrap;
}

._Menus ul li a {
    display: block;
    padding: 0 10px;
    height: 60px;
    line-height: 60px;
    text-decoration: none;
    color: #FFF;
    outline: none;
}

._Menus ul li a:hover {
    background-color: #FFF;
    color: #000;
}

._Iconbar {
    display: none;
    background-color: #000;
}

.menu-bar {
    width: 45px;
    align-self: center;
    cursor: pointer;
}

.icon-bar {
    height: 3px;
    width: 100%;
    background: #FFF;
    margin: 7px 0;
    display: block;
    border-radius: 2px;
}


@media (max-width: 600px) {
    ._Logo {
        height: 60px;
    }

    ._Menus {
        flex: 100%;
        background: #333;
        height: 0;
        overflow: hidden;

    }

    ._Menus ul{
        flex-direction: column;
    }

    ._Menus ul li a {
        height: 40px;
        font-size: 14px;
        text-transform: uppercase;
        line-height: 40px;
    }

    ._Menus ul li a:hover {
        background-color: #81d742;
        color: #FFF;
    }

    .container {
        justify-content: space-between;
    }

    ._Iconbar {
        display: flex;
        margin-right: 10px;

    }

    ._Menus-show {
        height: auto;
    }

After applying CSS our page layout looks like this image.
#On Desktop
after applying css on desktop
#On Mobile
After applying css on mobile


Our hamburger button is not working on mobile. To fix this, we need to add a JS script to our HTML file.
#JS script

function showHide() {
    var navList = document.getElementById("nav-lists");

    if (navList.className == '_Menus') {
        navList.classList.add("_Menus-show");
    } else {
        navList.classList.remove("_Menus-show");
    }

}

After that our hamburger button is able to hide and show the nav items like this image.
after applying js

#Final code of the CSS responsive navigation menu with logo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS responsive navigation menu</title>
    <style>
        *,
        *::before,
        *::after {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
        }

        body {
            padding: 0;
            margin: 0;
            background-color: #f7f7f7;
            font-family: sans-serif;
        }

        .navbar {
            width: 100%;
            background-color: #000;

        }

        .container {
            max-width: 1140px;
            margin: 0 auto;
            height: 60px;
            display: flex;
            flex-wrap: wrap;

        }

        ._Logo {
            overflow: hidden;
            text-align: center;
            flex-basis: 200px;
        }

        ._Logo img {
            height: 100%;
        }

        ._Menus ul {
            display: flex;
            list-style: none;
            padding: 0;
            margin: 0;
            flex-wrap: wrap;
        }

        ._Menus ul li a {
            display: block;
            padding: 0 10px;
            height: 60px;
            line-height: 60px;
            text-decoration: none;
            color: #FFF;
            outline: none;
        }

        ._Menus ul li a:hover {
            background-color: #FFF;
            color: #000;
        }

        ._Iconbar {
            display: none;
            background-color: #000;
        }

        .menu-bar {
            width: 45px;
            align-self: center;
            cursor: pointer;
        }

        .icon-bar {
            height: 3px;
            width: 100%;
            background: #FFF;
            margin: 7px 0;
            display: block;
            border-radius: 2px;
        }


        @media (max-width: 600px) {
            ._Logo {
                height: 60px;
            }

            ._Menus {
                flex: 100%;
                background: #333;
                height: 0;
                overflow: hidden;

            }

            ._Menus ul{
                flex-direction: column;
            }

            ._Menus ul li a {
                height: 40px;
                font-size: 14px;
                text-transform: uppercase;
                line-height: 40px;
            }

            ._Menus ul li a:hover {
                background-color: #81d742;
                color: #FFF;
            }

            .container {
                justify-content: space-between;
            }

            ._Iconbar {
                display: flex;
                margin-right: 10px;

            }

            ._Menus-show {
                height: auto;
            }

        }
    </style>
</head>

<body>
</body>
<nav class="navbar">
    <div class="container">
        <section class="_Logo"><img src="logo.png"></section>
        <section class="_Iconbar">
            <span class="menu-bar" onclick="showHide()">
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
                <i class="icon-bar"></i>
            </span>
        </section>
        <section class="_Menus" id="nav-lists">
            <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">About</a></li>
                <li><a href="#">Contact us</a></li>
            </ul>
        </section>
    </div>
</nav>
<script>
    function showHide() {
        var navList = document.getElementById("nav-lists");

        if (navList.className == '_Menus') {
            navList.classList.add("_Menus-show");
        } else {
            navList.classList.remove("_Menus-show");
        }

    }
</script>
</html>

Posts Navigation


Leave a Reply

Your email address will not be published. Required fields are marked *