How to create custom responsive navigation bar


In this tutorial we will learn and talk about how to design custom responsive navigation bar in html css and jquery. This navigation bar is fully responsive to all mobile devices for better and easy user interaction with website.

Navibar is more important part of any website because this helps users to navigate in our website with one click. A website having better UI will have large number of visitors so it is very important to have your website proper layout for all kind of devices because today millions of users visit websites on mobile devices. A navbar have the links of multiple pages and it is an hard challenge to convert a navbar to have better layout in mobile.

Read Also

navbar also contains logo of the website and sometimes it is hard to handle a logo in navbar. So we have designed a basic header of the website which consist of a navbar and a logo image. For this purpose we have use css media queries and jquery to design our navbar for desktops and mobile devices as well.

html code for the navigation bar:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>html css navbar</title>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="navbar">
        <div class="logo">
            <a href="">
                <img src="assets/images/logo.png" alt="">
            </a>
        </div>
        <div class="menu">
            <ul class="navbar-links">
                <li><a href="#" class="active">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Contact Us</a></li>
            </ul>
        </div>
        <button class="nav-btn" onclick="collapseNav()">
            <img src="assets/images/menu-alt-512.webp" alt="">
        </button>
    </div>
    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="assets/js/main.js"></script>
</body>
</html>

css code for the navigation bar:

@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100;200;300;400;500;600;700;800&display=swap');
body{
    padding: 0;
    margin: 0;
}

/* Navbar Style */

.navbar{
    padding: 10px;
    border-bottom: solid 1px #ccc;
    box-shadow: 0px 0px 8px rgba(0,0,0,0.3);
    display: flex;
}

/* Logo Design */

.logo img{
    max-width: 75px;
}

/* Align logo and links */

.logo, .menu{
    display: inline-flex;
}

/* Navbar links style */

.menu .navbar-links{
    padding: 0;
    margin: 0;
    list-style: none;
    align-self: center;
    font-family: 'Raleway', sans-serif;
}

.navbar-links li{
    float: left;
    margin: 0 5px;
}

.navbar-links li a{
    text-decoration: none;
    padding: 6px 12px;
    font-weight: 500;
    letter-spacing: .7px;
    border-radius: 2px;
    color: #4E2982;
}

.navbar-links li a:hover, .navbar-links li a.active:hover{
    background-color: #4E2982;
    color: white;
}

.navbar-links li a.active{
    background-color: #4E2982;
    color: #ffffff;
}

.menu{
    margin-left: auto;
}

.nav-btn{
    display: none;
}

@media screen and (max-width: 750px){
    .menu{
        display: none;
        width: 100%;
        position: absolute;
        top: 60px;
        background-color: white;
        z-index: 2;
        left: 0px;
    }
    .menu.collaps-nav{
        display: block;
    }
    .menu .navbar-links{
        padding: 10px;
    }
    .navbar-links li a{
        display: block;
    }
    .navbar-links li {
        float: none;
        margin: 0 5px;
    }
    .nav-btn{
        display: block;
        display: block;
        width: 30px;
        height: 30px;
        margin-left: auto;
        align-self: center;
        padding: 3px;
        background-color: transparent;
        border: solid 1px #ccc;
        border-radius: 2px;
        outline: none;
    }
    .nav-btn img{
        width: 100%;
    }
}

This navigation bar is ready for desktop view and after having this code we will have following preview in the browsernavbar preview

Now we have to code only few lines of jquery code to handle this navigation bar for mobile devices.

jQuery code for the navigation bar:

function collapseNav(){
  $('.menu').toggleClass('collaps-nav');
}

By using this way you can design responsive navbar for website. Hope this article is very helpful and beneficial for all members. Stay tuned and see you next time.


Tipu

about the author

Tipu is web developer from Pakistan. He is very talented in developing websites in wordpress and multiple frameworks in php.

other posts by Tipu
View all Posts By Tipu

No Comments Yet!

Leave a Comment  

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