This tutorial is about how to create a perfect responsive navigation bar in HTML, CSS & Jquery with a dropdown & smoothly toggling hamburger icon.

This is a very simple tutorial for you to learn how to create a simple responsive navigation menu and also, how responsive layout works with CSS media query breakpoints.

Responsiveness of a website is a must for a better user experience. The menu bar plays a huge role to guide your website users to find what they want easily.

So, you love designing your websites from scratch right? Here’s the best tutorial for you to create your responsive navigation bar with the logo and a call to action button.

Responsive Navigation Bar - On Mobile View - Techmytip.com
Responsive Navigation Bar on Mobile

Some cool features of this CSS Menu Dropdown

  • A simple responsive navigation bar that fits all device sizes.
  • Smoothly toggling CSS hamburger menu icon.
  • Clean and novel design with properly structured HTML and CSS menu bar.
  • Highlighted call to action button included.
  • Animated dropdown menu CSS arrow icon on hover/click.
  • Auto collapsing CSS navigation submenu on mobile devices.

Also this does’t contain any heavy JavaScript files. Codes are super simple and clean. You can customize easily. Let’s check the code:

Navigation Bar HTML Part

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Bar Demo</title>
	
</head>

<body>
	<header class="clear">
		
		<div class="logo_area">
			<a href="https://techmytip.com/"><img src="https://techmytip.com/wp-content/uploads/2019/12/techmytip-logo-1.png" alt="logo" /></a>
		</div>
		<div class="hamb">
			<div class="bar1"></div>
			<div class="bar2"></div>
			<div class="bar3"></div>
		</div>
		
		<nav>
			<ul class="desplegable">
				<li><a class="menu" href="#">ABOUT US</a></li>
				<li><a class="menu" href="#">WEB DESIGN</a></li>

				<li class="haveSub"><a class="menu" href="#">DIGITAL MARKETING</a><span class="arrow_dd"></span>
					<ul class="a_menu">
						<li><a href="#">SEO</a></li>
						<li><a href="#">SOCIAL MEDIA</a></li>
						<li><a href="#">PPC</a></li>
					</ul>
				</li>

				<li class="haveSub"><a class="menu" href="#">CREATIVE DESIGN</a><span class="arrow_dd"></span>
					<ul class="a_menu">
						<li><a href="#">LOGO</a></li>
						<li><a href="#">BRANDING</a></li>
						<li><a href="#">BROCHURE </a></li>
					</ul>
				</li>
       		</ul>
			<div class="header_cta">
				<a href="">REQUEST INFO</a>
			</div>
		</nav>
	</header>
	
	<section class="content_area">
		<h1>Responsive Navigation Bar with Dropdown menu</h1>
		<div class="back_button"><a href="">BACK TO TUTORIAL</a></div>
	</section>

</body>
</html>

Navigation Bar CSS Part

/*CSS Reset*/
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary,time, mark, audio, video {	margin: 0;	padding: 0;	border: 0;	font-size: 100%;	font: inherit;	vertical-align: baseline;} article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {	display: block;}body {	line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {	content: ''; content: none;}table {	border-collapse: collapse;	border-spacing: 0;}
/*CSS Reset Ends*/

@import url('https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,500,600,600i,700i,800');

body {font-family: 'Montserrat', sans-serif;}
header { width: 100%; background: #FFF; box-shadow: 1px 1px 10px rgba(0,0,0,0.15)}
.clear { clear:both;} .clear::after {  content: "";  clear: both;  display: table;}
a {text-decoration:none}
.logo_area { width:12%; float: left;  padding:0 30px}
.logo_area img { width: 190px}
nav{ float:right; }
nav > ul { padding: 0 30px; text-align: right; float: left}
nav > ul > li { display:inline-block}
nav ul li a { color:#333333; font-weight:600; padding:30px 20px; display:block; text-transform:uppercase; font-size: 16px}
nav ul > li > a:hover { color:#424FD2}
nav ul li.haveSub { position:relative}
nav ul li.haveSub ul { position: absolute; background: #FFFFFF; text-align: left; z-index: 2; width: auto; min-width: 200px; max-width: 300px; left: 0; right: 0; top: 100%; -webkit-box-shadow: 0px 2px 17px -7px rgba(0,0,0,0.69); -moz-box-shadow: 0px 2px 17px -7px rgba(0,0,0,0.69); box-shadow: 0px 2px 22px -7px rgba(0,0,0,0.2); padding:0; visibility: hidden; opacity: 0; transform: translateZ(0); transform: translateY(10%); transition: all 0.2s ease 0s, visibility 0s linear 0.2s;}
nav ul li:hover > ul { visibility: visible; opacity: 1;  transform: translateX(0%);transition-delay: 0s;}
nav ul li.haveSub ul li > a {color: #333; padding:15px 20px;}
nav ul li.haveSub a { position:relative; padding-right: 40px; transition: all 0.2s}
nav ul li.haveSub .arrow_dd::after {content:''; margin-top:  3px; position: absolute; width: 2px; height: 10px; background: #424242; transform: rotate(45deg); right: 19px; transition: transform .2s }
nav ul li.haveSub .arrow_dd::before {content:''; margin-top:  3px; position: absolute; width: 2px; height: 10px; background: #424242; transform: rotate(-45deg); right: 25px; transition: transform .2s}
nav ul li.haveSub:hover .arrow_dd::after{transform: rotate(-45deg);}
nav ul li.haveSub:hover .arrow_dd::before{transform: rotate(45deg);}
nav ul li.haveSub ul a:hover { background:#F1F1F1; }
.arrow_dd { position:absolute; top: 30px}
.header_cta { background:#424FD2; color: #FFFFFF;  display: inline-block}
.header_cta a {color: #FFFFFF; padding:30px 20px; display: block}
.hamb {display: none; padding:26px 20px; float: right; margin: 5px 0 0 0;}
.bar1, .bar2, .bar3 {width: 30px; height: 2px; border-radius: 3px; background-color: #BBBBBB; margin: 6px 0; transition: 0.4s;}
.change .bar1 { -webkit-transform: rotate(-45deg) translate(-8px, 6px); transform: rotate(-45deg) translate(-8px, 6px);}
.change .bar2 {opacity: 0;}
.change .bar3 {-webkit-transform: rotate(45deg) translate(-5px, -4px); transform: rotate(45deg) translate(-5px, -4px);}		

		
@media only screen and (max-width: 768px) {
	.logo_area{width:60%; padding: 0 20px}
	.logo_area img {width:200px; padding-top: 5px;}
	nav > ul {text-align:left; padding: 0; width: 100%}
	nav > ul > li { display:block; border-top: 1px solid #F1F1F1;}
        .header_cta {width:100%}
	.hamb {display: block;}
	nav {display:none; width: 100%}
	nav ul li.haveSub ul {position:static; max-width: none; box-shadow: none; background:#F5F5F5; visibility: visible; opacity: 1; transition: none; transform: translateZ(0); transform: translateY(0);}
	nav ul li.haveSub ul li > a {padding-left: 30px}
	nav ul li:hover > ul {  transform: none; transition-delay: 0; }
	.arrow_dd {right:5px}
	.a_menu {display: none}
		}
		
@media only screen and (min-width: 769px) and (max-width: 1024px) {
	.header_cta {display: none}
	.logo_area{width:100%; box-sizing: border-box;}
	.logo_area img{width:200px; margin: 0 auto; display: block}
	.desplegable {text-align: center}
	nav {float: none}
	nav ul {float: none}
	.a_menu {display: none}
	.arrow_dd {right:0}
	}
		
		
/*Some additional body styles*/
h1{ font-size: 30px; font-weight: 600; color: #333333; text-align: center; margin-top: 50px; line-height: 1.2}
.content_area { padding: 20px}
.back_button {display:table; margin: 0 auto; margin-top: 50px}
.back_button a{ display: block; padding:20px 30px; background:#424FD2; color: #FFFFFF; border-radius: 30px; -webkit-box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2);  -moz-box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2);   box-shadow: 0px 7px 16px 5px rgba(66,79,210,0.2); transition: all 0.2s }
.back_button a:hover {box-shadow: none}

Note: The first few lines for reset all the CSS default styling

jQuery/JavaScript Part

<script src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
//menu hamburger start
  $(".hamb").click(function(){
	$(".hamb").toggleClass("change");
	  $("nav").slideToggle(200);
  });	
//menu hamburger ends
//menu 
$(document).ready(function() {
$('li a.menu').click(
	function(e) {
	e.preventDefault();
	var dropDown = $(this).parent().find("ul.a_menu");           		
	dropDown.slideToggle(200);
	$('li a.menu').parent().find("ul.a_menu").not(dropDown).slideUp(200);
     
         });    
	});
	//menu

Note: Make sure to place the JQuery just before placing this JavaScript snippet

Conclusion

Hope you’ve learned how to create a responsive navigation bar in HTML, CSS and JQuery. Here you have all code parts. Check the demo below & you can also download the file.

If you found this post is useful, don’t forget to share and support this on your favorite social media platform. Leave your comments below if this ia usefull or need any improvement. Cheers! ✌️

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It