Today, we learn how to create a responsive navbar with a search box using HTML, CSS, and JavaScript. A navigation bar is an important element on a website; it allows users to easily navigate through different parts of the site. Typically, it’s displayed as a horizontal list of links at the top of each page. In this article, I’ll walk you through creating a responsive navbar with a search box. This navbar is fully responsive, meaning it will automatically adjust its height and width to fit any device. I’ve used CSS Flex and the @media querys property to achieve this. The search box in this navbar is just for design purposes, so entering any text won’t actually perform a search.
For the Responsive Navbar fonts and icons
HTML Code
In this example, we created a navigation element and split it into 3 pieces:
- Nav-left
- Nav-center
- Nav-right
Nav-left : contains the logo
Nav-center : contains the search box
Nav-right: it contains the icons or links to other pages or functionalities .
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DZCoding</title>
<link rel="stylesheet" href="css/main.css">
<link rel="stylesheet" href="css/boxicons.min.css">
</head>
<body>
<nav class="navbar">
<div class="container">
<!--This is navbar left area contains logo-->
<div class="nav-left">
<a href="https://www.dzcoding.com/" class="logo">DZCoding</a>
</div>
<!--This is navbar center area contains search bar-->
<div class="nav-center">
<i class='bx bx-sm bx-left-arrow-alt'></i>
<input type="text" placeholder="Search">
<button class="nav-center-search-btn"><i class='bx bx-sm bx-search'></i></i></button>
</div>
<!--This is a navbar right area contains icons and links-->
<div class="nav-right">
<i class='bx bx-sm bx-search nav-right'></i>
<i class='bx bx-sm bx-category'></i>
<i class='bx bx-sm bxs-user-circle'></i>
</div>
</div>
</nav>
<script src="js/main.js"></script>
</body>
</html>CSS code
Using css and media queries, the search box will disappear in mobile and small devices and we will replace it with a search icon
@font-face {font-family: ubuntu; src: url(../fonts/Ubuntu-Regular.ttf);}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
font-family: ubuntu;
}
.container{
width: 100%;
max-width: 1250px;
margin: 0 auto;
display: flex;
justify-content: space-between;
align-items: center;
}
.navbar{
background: #fff;
padding: 12px 10px;
border-bottom: 5px solid #16a085;
}
.nav-left{
display: flex;
align-items: center;
flex: 1;
}
.nav-left .logo{
text-decoration: none;
color: #16a085;
font-size: 20px;
}
.nav-center{
display: flex;
justify-content: center;
margin: 0;
flex:8;
}
.nav-center .bx-left-arrow-alt{
color: #16a085;
font-size: 1.25rem;
align-self: center;
margin-right: 1.5rem;
cursor: pointer;
display: none;
}
.nav-center input{
background: #fff;
width: 70%;
max-width:600px;
border: 1px solid #16a085;
border-right: none;
padding-left: 10px;
margin: 0;
outline: none;
color: #858585;
font-size: 16px;
}
.nav-center input::placeholder{
color: #858585;
padding-left: 0.2em;
}
.nav-center .nav-center-search-btn{
padding: 6px 30px;
max-width: 10%;
background: #fff;
color: #16a085;
border: 1px solid #16a085;
border-left: none;
margin: 0;
max-width: 20%;
cursor: pointer;
}
.nav-center .nav-center-search-btn:hover i {
color: #1abc9c;
}
.nav-right{
flex: 3;
display: flex;
justify-content: flex-end;
}
.nav-right .bx-search{
display: none;
}
.nav-right .bx{
margin-right: 10px;
color: #16a085;
cursor: pointer;
}
.nav-right .bx:hover{
color: #1abc9c;
}
@media (max-width: 600px) {
.nav-right .bx-search{
display: inline;
}
.nav-center {
visibility:hidden;
}
}
JAVASCRiPT Code
Using javascript, we can now switch between the navbar and search box smoothly.
let searchBtn = document.querySelector(".nav-right .bx-search");
let navbarCenter = document.querySelector(".nav-center");
let navbarRight = document.querySelector(".nav-right");
let navbarCenterInput = document.querySelector(".nav-center input");
let navbarLeft = document.querySelector(".nav-left");
let navbarCenterArrow = document.querySelector(".bx-left-arrow-alt");
searchBtn.addEventListener("click", function(){
navbarCenter.style.visibility = "visible";
navbarCenterArrow.style.display = "inline";
navbarCenter.style.width = "100%";
navbarCenterArrow.style.maxWidth = "20%";
navbarCenterInput.style.maxWidth = "70%";
navbarRight.style.display = "none";
navbarLeft.style.display = "none";
});
navbarCenterArrow.addEventListener("click", function(){
navbarRight.removeAttribute("style");
navbarLeft.removeAttribute("style");
navbarCenter.removeAttribute("style");
navbarCenterArrow.removeAttribute("style");
navbarCenterInput.removeAttribute("style");
});
To conclude, this Responsive Navbar is a versatile and functional component for any website. Its fully responsive design ensures optimal display across various devices, while the CSS and media queries provide a seamless transition between different screen sizes. Although the search box is primarily for aesthetic purposes, the JavaScript code enhances user experience by allowing smooth switching between the navbar and search functionality. Stay connected for more beneficial content in the future.
