HomeHTML & CSSResponsive Navigation Bar using HTML CSS and JS

Responsive Navigation Bar using HTML CSS and JS

responsive navigation bar

Responsive Navigation Menu Bar Using HTML and CSS

The responsive navigation bar is a very used part in almost every webpage which has multiple site links to move other sections of that webpage or website. Hello, readers in this post I am going to show you how we can create an easy and Responsive navigation bar just using only HTML, CSS, and Javascript jquery codes. If you do have not more knowledge in js. It can be created with simple HTML and CSS only.

The navigation bar I created in this blog post is very simple to use and has hover effects. In most navigation bars, the navigation bar is arranged horizontally at the starting of the web page, and sometimes, a horizontal navbar can not be managed on a web page.

here you can on the top-given post image, each menu has a hover effect, meaning that when you hover or click on the menus, the color of the background will change. In this blog post (Responsive Navigation Bar Using HTML, CSS, and JS), it is on the top of the website page, and in this navigation bar, there is a website logo on the left side and some compulsory navigation links on the right side of that navigation bar.

On big resolution devices like computers, laptops, these navigation buttons are arranged horizontally but on small mobile phones and other small-screen devices, these link buttons are arranged in vertical form. This is a simple HTML and CSS coding project and also I did use some JS code to create this responsive Navigation Bar.

Responsive Navigation Bar (Source Code)

First of all, you need to create three coding documents for the program (Responsive Navigation Bar). After creating these three coding documents just move the below-shared codes in your coding document files.

First, you must create an HTML coding file and give the name it index.html and add the below-given HTML codes into your newly created HTML document file. You must have to create this file with an extension .html.

Second, create a new CSS(Cascading Style Sheet) file with the name of style.css and move the below-given CSS code in your CSS file. Remember that you have to create a file with .css Extensions.

third, create a JS(javascript) file with the name of script.js and paste the given codes in your JS file. Again remember that you have to create a file with .js extensions.

 I have given below the all-important source codes, you can sampling copy them from there. First of all, Add meta viewport and script file in the head section of HTML code 

HTML:

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://kit.fontawesome.com/b99e675b6e.js"></script>  
<div class="menu_wrapper">
	<div class="navbar">
		<div class="inner_navbar">
			<div class="logo">
				<a href="#">Company<span>LOGO</span></a>
			</div>
			<div class="menu">
				<ul>
					<li><a href="#" class="active">Home</a></li>
					<li><a href="#">Profile</a></li>
                    <li><a href="#">Services</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">About</a></li>
				</ul>
			</div>
		</div>
		<div class="hamburger">
			<i class="fas fa-bars"></i>
		</div>
	</div>
</div>

CSS:

      @import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');

*{
	margin: 0;
	padding: 0;
	font-family: 'Ubuntu', sans-serif;
	text-decoration: none;
	box-sizing: border-box;
	list-style: none;
}

body{
	background: #f7f7f7;
	color: #545454;
}

.navbar{
	width: 100%;
	height: 60px;
	background: #282647;
	position: fixed;
	top: 0;
	left: 0;
	padding: 0 25px;
}

.navbar .inner_navbar{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 100%;
}

.navbar .hamburger{
	display: none;
}

.navbar .logo a{
	font-weight: 700;
	font-size: 24px;
	letter-spacing: 3px;
	color: #fff;
}

.navbar .logo a span{
	color: #4e42f5;
}

.navbar .menu ul{
	display: flex;
}

.navbar .menu ul li a{
	width: 120px;
	margin-right: 10px;
	display: block;
	text-align: center;
	padding: 10px;
	border-radius: 25px;
	color: #fff;
	text-transform: uppercase;
	font-size: 14px;
	letter-spacing: 2px;
	transition: all 0.2s ease;
}

.navbar .menu ul li:last-child a{
	margin-right: 0;	
}

.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
	background: #4e42f5;
}

.main_container{
	margin-top: 60px;
	padding: 25px;
}

.main_container .content{
	display: flex;
	width: 100%;
	flex-wrap: wrap;
}

.main_container .content .item_wrap{
	width: 50%;
	padding: 10px;
}

.main_container .content .item_wrap .item{
	padding: 25px;
	background: #fff;
	line-height: 22px;
}

@media (max-width: 992px){
	.navbar{
		height: 100px;
		padding: 12px;
	}
	.navbar .inner_navbar{
		flex-direction: column;
	}
	.main_container{
		margin-top: 100px;
	}
}

@media (max-width: 728px){
	.navbar{
		height: 60px;
	}
	.navbar .inner_navbar{
		flex-direction: row;
	}
	.main_container{
		margin-top: 60px;
	}
	.navbar .menu ul{
		position: absolute;
		top: 60px;
		left: 0;
		display: block;
		background: #282647;
		width: 100%;
	}
	.navbar .menu ul li{
		padding: 10px;
	}
	.navbar .menu ul li a{
		width: 100%;
		padding: 12px;
	}
	.navbar .hamburger{
		display: block;
		position: absolute;
		top: 15px;
		right: 25px;
		font-size: 24px;
		color: #fff;
		cursor: pointer;
		transition: all 0.2s ease;
	}
	.navbar .hamburger:hover{
		color: #4e42f5;
	}
	.navbar .menu{
		display: none;
	}
	.navbar .menu.active{
		display: block;
	}
	.main_container .content .item_wrap{
		width: 100%;
	}
}

JavaScript:

          var hamburger = document.querySelector(".hamburger");
	var menu = document.querySelector(".menu");

	hamburger.addEventListener("click", function(){
		menu.classList.toggle("active");
	})
RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

All Categories

Most Popular