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
A 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.
<!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>
@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 browser
Now we have to code only few lines of jquery code to handle this navigation bar for mobile devices.
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.
No Comments Yet!