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.
View Demo
Language
HTML, CSS, Jquery
Responsive
Yes
Capable For Blogger
No
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"> <!--Font Awesome v5--> <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/> <!--Custom Font Family--> <link href="https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,400;0,500;1,500&display=swap" rel="stylesheet"> <!--Jquery CDN--> <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> <!--Text Logo--> <!-- <li class="brand-logo"><a href="" class="text-logo">Your Logo</a></li> --> <!--Image Logo--> <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
Thanks Happy Learning :-)
Keep visiting
Leave A Relpy