How To Make Responsive Navigation Menu

How to make a responsive navigation menu?

Here in this article, we are going to make a responsive navigation menu using HTML CSS, and jquery. As you know, the always responsive menu contains a text logo or image logo.

But we are making our responsive navigation menu with a text logo as well as an image logo. Surprise actually I am adding both the text and image logo in our responsive menu. It depends on you to use one of them.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>how to make responsive navigation menu</title>
    <link type="text/css" rel="stylesheet" href="css/style.css">
    
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>
    
    
    <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,500&display=swap" rel="stylesheet">
    
    
    <script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>
</head>
<body>
    <nav>
        
        <li class="brand-logo"><a href="" class="text-logo">Your Logo</a></li>
        
        
        
        <div id="responsive-icon">
            <i class="fas fa-bars"></i>
        </div>
        <ul class="nav-links">
            <li><a href="">Home</a></li>
            <li><a href="">Blog</a></li>
            <li><a href="">About us</a></li>
            <li><a href="">Contact us</a></li>
        </ul>
    </nav>

*{
        margin: 0px;
        padding: 0px;
        box-sizing: border-box;
    }
    nav {
        background-color: #000;
    }
    nav li,a {
        text-decoration: none;
        list-style: none;
        font-family: 'Roboto', sans-serif;
    }
    nav .brand-logo {
        cursor: pointer;
        list-style: none;
        padding: 10px 0px 10px 10px;
        float: left;
    }
    nav .brand-logo .text-logo{
        font-size: 30px;
        color: #fff;
        padding-left: 15px;
    }
    nav .brand-logo a img {
        width: 200px;
    }
    nav #responsive-icon {
        text-align: right;
        padding: 20px 20px 0px 0px;
        cursor: pointer;
        display: none;
        width: 50%;
    }
    nav #responsive-icon .fa-bars {
        color: #fff;
        font-size: 30px;
        font-weight: 400;
    }
    nav .nav-links {
        list-style: none;
        font-size: 18px;
        text-align: right;
    }
    nav .nav-links li {
        display: inline-block;
        padding: 20px 20px 0px;
    }
    nav .nav-links li a {
        color: #fff;
    }
    nav .nav-links li a:hover{
        color: darkorange;
        transition: .30s all linear;
    }
    nav::after {
        content: "";
        display: block;
        clear: both;
    }
    nav .nav-links li::before{
        content: "";
        display: block;
        clear: both;    
    }
    
    @media screen and (max-width: 768px){
        nav .brand-logo{
            float: none;
            display: inline-block;
            width: 48%;
        }
        nav .nav-links {
            float: none;
            padding-bottom: 20px;
            display: none;
        }
        nav .nav-links li {
            display: block;
            text-align: center;
        }
        nav #responsive-icon {
            display: inline-block;
        }
    }
    
    @media screen and (max-width: 425px){
        nav .brand-logo{
            padding-left: 0px;
        }
        nav .brand-logo a img {
            width: 170px;
        }
    }

View Demo

Language

HTML, CSS, Jquery

Responsive

Yes

Capable For Blogger

Let start make a responsive navigation menu

Making the navigation menu structure using HTML

HTML Code

Create an index.html file and add HTML default markup.

Bonus tip: If you are using VS code editor use emmet to write HTML markup. As you see in the below video.

Html markup

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> </body> </html>

Let’s first add links in our head tag because it will help to make our responsive navigation menu.

In head tag, we are adding only three links

1. Font awesome v5 Cdn (Important) Font Awesome is an icon website which helps users to insert icon on the website. We are using font awesome updated version 5.10.0 Related Article: How To Use Font Awesome Icons in HTML

In font awesome cdn we are using bars icon. This means a hamburger menu icon. It helps in responsive purposes.

2. Custom font (Optional) In the second link, we are using a custom font family from the google fonts website. Here we are using the Roboto font family in our responsive navigation menu. This is optional you can use another font family that you like to use it. Related Article: [Full Guide] How to use Google Font in your project 3. Jquery CDN (Important) This is an important link which we are using in our responsive menu. Jquery CDN help to work with jquery which is a javascript library.

Head Tag code (Paste this head tag code in index.html file)

<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>how to make responsive navigation menu</title> <link type="text/css" rel="stylesheet" href="css/style.css">  <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>  <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,500&display=swap" rel="stylesheet">  <script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script> </head>

Now we have completed our head tag section.

Body Tag (Paste this code in body tag)

<body> <nav>    <li class="brand-logo"><a href=""><img src="images/brand-logo.png"></a></li> <div id="responsive-icon"> <i class="fas fa-bars"></i> </div> <ul class="nav-links"> <li><a href="">Home</a></li> <li><a href="">Blog</a></li> <li><a href="">About us</a></li> <li><a href="">Contact us</a></li> </ul> </nav> <script type="text/javascript" src="js/script.js"></script> </body>

After add head and body, tag code save and see in your browser

HTML Output

CSS CODE

Now create a CSS file named it style.css and put give below code in a CSS file. Here we have added responsive code also.

*{ margin: 0px; padding: 0px; box-sizing: border-box; } nav { background-color: #000; } nav li,a { text-decoration: none; list-style: none; font-family: 'Roboto', sans-serif; } nav .brand-logo { cursor: pointer; list-style: none; padding: 10px 0px 10px 10px; float: left; } nav .brand-logo .text-logo{ font-size: 30px; color: #fff; padding-left: 15px; } nav .brand-logo a img { width: 200px; } nav #responsive-icon { text-align: right; padding: 20px 20px 0px 0px; cursor: pointer; display: none; width: 50%; } nav #responsive-icon .fa-bars { color: #fff; font-size: 30px; font-weight: 400; } nav .nav-links { list-style: none; font-size: 18px; text-align: right; } nav .nav-links li { display: inline-block; padding: 20px 20px 0px; } nav .nav-links li a { color: #fff; } nav .nav-links li a:hover{ color: darkorange; transition: .30s all linear; } nav::after { content: ""; display: block; clear: both; } nav .nav-links li::before{ content: ""; display: block; clear: both; } @media screen and (max-width: 768px){ nav .brand-logo{ float: none; display: inline-block; width: 48%; } nav .nav-links { float: none; padding-bottom: 20px; display: none; } nav .nav-links li { display: block; text-align: center; } nav #responsive-icon { display: inline-block; } } @media screen and (max-width: 425px){ nav .brand-logo{ padding-left: 0px; } nav .brand-logo a img { width: 170px; } }

CSS Output

Jquery Code

Now create one more file named script.js and put give below code.

$(document).ready(function(){ $("#responsive-icon").click(function(){ $(".nav-links").slideToggle() }); });

Congratulations you have successfully created a responsive navigation menu using HTML CSS and jquery.

If you have any doubt or any query comment down below.

Download the responsive navigation menu code source by clicking the below download button

Download Now

Thanks Happy Learning :-)

Keep visiting

How To Make Responsive Navigation Menu - Free Code Source

How to make a responsive navigation menu?

Leave A Relpy

Labels