Hello coding enthusiasts! Today, let’s build a Responsive Navigation Bar using HTML, CSS, and JavaScript. Whether you’re a seasoned coder or just starting out, this tutorial is a fantastic way to create a user-friendly navigation experience for your website.
We’ll keep it simple – using HTML for structure, CSS for styling, and a touch of JavaScript for that responsive magic. No need for complex setups – just easy coding to make your navigation bar adapt seamlessly to different screen sizes.
Join me on this coding journey into the world of Responsive Navigation Bars. Let’s make it straightforward and practical with HTML, CSS, and JavaScript. Ready to enhance your website’s navigation? Let’s get started!
HTML :
The given code is an HTML document that represents a sidebar menu for a web application. It includes a navigation bar with various menu links, a search box, and additional options like logout and dark mode. The sidebar can be toggled open or closed using a chevron icon. The code also includes a section for the main content of the web page, in this case, a “Dashboard Sidebar” text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Navigation Bar with Search Box | CodingStella</title>
<link rel="stylesheet" href="style.css" />
<!-- Unicons CSS -->
<link rel="stylesheet" href="https://unicons.iconscout.com/release/v4.0.0/css/line.css" />
<script src="script.js" defer></script>
</head>
<body>
<nav class="nav">
<i class="uil uil-bars navOpenBtn"></i>
<a href="#" class="logo">CodingStella</a>
<ul class="nav-links">
<i class="uil uil-times navCloseBtn"></i>
<li><a href="#">Home</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
<i class="uil uil-search search-icon" id="searchIcon"></i>
<div class="search-box">
<i class="uil uil-search search-icon"></i>
<input type="text" placeholder="Search here..." />
</div>
</nav>
</body>
</html>
CSS :
This CSS code provides styles for a responsive navigation menu. It begins with a global reset and sets a background color for the body. The navigation bar is fixed at the top with padding, a background color, and a box shadow. Links and other styles are defined for the navigation. The search box is initially hidden and becomes visible when the "openSearch" class is added.
The styles also include media queries for various screen sizes, adjusting padding, search box position, and making the navigation menu collapsible for smaller screens.
/* Google Fonts - Poppins */
@import url("https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background: #f0faff;
}
.nav {
position: fixed;
top: 25px;
left: 0;
width: 100%;
padding: 15px 200px;
background: #4b16ad;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.nav,
.nav .nav-links {
display: flex;
align-items: center;
}
.nav {
justify-content: space-between;
}
a {
color: #fff;
text-decoration: none;
}
.nav .logo {
font-size: 22px;
font-weight: 500;
}
.nav .nav-links {
column-gap: 20px;
list-style: none;
}
.nav .nav-links a {
transition: all 0.2s linear;
}
.nav.openSearch .nav-links a {
opacity: 0;
pointer-events: none;
}
.nav .search-icon {
color: #fff;
font-size: 20px;
cursor: pointer;
}
.nav .search-box {
position: absolute;
right: 250px;
height: 45px;
max-width: 555px;
width: 100%;
opacity: 0;
pointer-events: none;
transition: all 0.2s linear;
}
.nav.openSearch .search-box {
opacity: 1;
pointer-events: auto;
}
.search-box .search-icon {
position: absolute;
left: 15px;
top: 50%;
left: 15px;
color: #4a98f7;
transform: translateY(-50%);
}
.search-box input {
height: 100%;
width: 100%;
border: none;
outline: none;
border-radius: 6px;
background-color: #fff;
padding: 0 15px 0 45px;
}
.nav .navOpenBtn,
.nav .navCloseBtn {
display: none;
}
/* responsive */
@media screen and (max-width: 1160px) {
.nav {
padding: 15px 100px;
}
.nav .search-box {
right: 150px;
}
}
@media screen and (max-width: 950px) {
.nav {
padding: 15px 50px;
}
.nav .search-box {
right: 100px;
max-width: 400px;
}
}
@media screen and (max-width: 768px) {
.nav .navOpenBtn,
.nav .navCloseBtn {
display: block;
}
.nav {
padding: 15px 20px;
}
.nav .nav-links {
position: fixed;
top: 0;
left: -100%;
height: 100%;
max-width: 280px;
width: 100%;
padding-top: 100px;
row-gap: 30px;
flex-direction: column;
background-color: #11101d;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.4s ease;
z-index: 100;
}
.nav.openNav .nav-links {
left: 0;
}
.nav .navOpenBtn {
color: #fff;
font-size: 20px;
cursor: pointer;
}
.nav .navCloseBtn {
position: absolute;
top: 20px;
right: 20px;
color: #fff;
font-size: 20px;
cursor: pointer;
}
.nav .search-box {
top: calc(100% + 10px);
max-width: calc(100% - 20px);
right: 50%;
transform: translateX(50%);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
}
JavaScript:
This JavaScript code controls a responsive navigation menu. When the search icon is clicked, it toggles between showing a search bar and hiding the navigation menu. Clicking the navigation open button displays the navigation menu, while the close button hides it. The code also updates the search icon to reflect the current state.
Overall, this script enables a smooth user experience with interactive navigation elements on the webpage.
const nav = document.querySelector(".nav"),
searchIcon = document.querySelector("#searchIcon"),
navOpenBtn = document.querySelector(".navOpenBtn"),
navCloseBtn = document.querySelector(".navCloseBtn");
searchIcon.addEventListener("click", () => {
nav.classList.toggle("openSearch");
nav.classList.remove("openNav");
if (nav.classList.contains("openSearch")) {
return searchIcon.classList.replace("uil-search", "uil-times");
}
searchIcon.classList.replace("uil-times", "uil-search");
});
navOpenBtn.addEventListener("click", () => {
nav.classList.add("openNav");
nav.classList.remove("openSearch");
searchIcon.classList.replace("uil-times", "uil-search");
});
navCloseBtn.addEventListener("click", () => {
nav.classList.remove("openNav");
});
There you have it! We’ve successfully crafted a Responsive Navigation Bar using HTML, CSS, and JavaScript. Now, your website’s navigation is not only functional but also adapts smoothly to different devices. Great job on this coding adventure!
If you run into any problems with your project, worry not. The remedy is just a click away—Download the source code and confront your coding challenges with enthusiasm. Enjoy your coding adventure!
