Hello friends
today you will create a responsive header or navigation bar using HTML - CSS and Javascript.
A navigation bar is a horizontal section that contains logo navigation links aligned at the top of the webpage. The main motive of this navigation bar is to make it easier for users to be redirected from one webpage to another.
Navigation Menu Bar [Source Code]
To get the following HTML CSS & JavaScript code for Navigation Bar with Dark/Light Mode features. You need to create two files one is an HTML file and another is a CSS file. After creating these two files then you can copy-paste the given codes on your document.
Double Click to Copy
<!DOCTYPE html>
<!-- === Coding by Code Inser | https://insercode.blogspot.com/ === -->
<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">
<!-- ===== CSS ===== -->
<link rel="stylesheet" href="style.css">
<!-- ===== Font Clash Display =====-->
<link href="https://api.fontshare.com/v2/css?f[]=clash-display@700&display=swap" rel="stylesheet">
<!-- ===== Boxicons CSS ===== -->
<link href='https://unpkg.com/boxicons@2.1.1/css/boxicons.min.css' rel='stylesheet'>
<!--<title>Responsive Navigation Menu Bar</title>-->
</head>
<body>
<nav>
<div class="nav-bar">
<i class='bx bx-menu sidebarOpen' ></i>
<span class="logo navLogo"><a href="https://www.wirdxd.com/">Wird XD</a></span>
<div class="menu">
<div class="logo-toggle">
<span class="logo"><a href="https://www.wirdxd.com/">Wird XD</a></span>
<i class='bx bx-x siderbarClose'></i>
</div>
<ul class="nav-links">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
<div class="darkLight-searchBox">
<div class="dark-light">
<i class='bx bx-moon moon'></i>
<i class='bx bx-sun sun'></i>
</div>
<div class="searchBox">
<div class="searchToggle">
<i class='bx bx-x cancel'></i>
<i class='bx bx-search search'></i>
</div>
<div class="search-field">
<input type="text" placeholder="Search...">
<i class='bx bx-search'></i>
</div>
</div>
</div>
</div>
</nav>
<script src="index.js"></script>
</body>
</html>
Double Click to Copy
/* ===== Google Font Import - Poppins ===== */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');
@import url('https://api.fontshare.com/v2/css?f[]=clash-display@700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
transition: all 0.4s ease;;
}
/* ===== Colours ===== */
:root{
--body-color: #ffffff;
--nav-color: #f9f9f9;
--side-nav: #ffffff;
--text-color: rgb(0, 0, 0);
--search-bar: #F2F2F2;
--search-text: #010718;
}
body{
height: 100vh;
background-color: var(--body-color);
}
body.dark{
--body-color: #18191A;
--nav-color: #242526;
--side-nav: #242526;
--text-color: #CCC;
--search-bar: #242526;
}
nav{
position: fixed;
top: 0;
left: 0;
height: 70px;
width: 100%;
background-color: var(--nav-color);
z-index: 100;
}
body nav{
border-bottom: 1px solid #393838;
}
nav .nav-bar{
position: relative;
height: 100%;
max-width: 1000px;
width: 100%;
background-color: var(--nav-color);
margin: 0 auto;
padding: 0 30px;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .nav-bar .sidebarOpen{
color: var(--text-color);
font-size: 25px;
padding: 5px;
cursor: pointer;
display: none;
}
nav .nav-bar .logo a{
font-family: 'Clash Display', sans-serif;
font-size: 25px;
font-weight: 500;
color: var(--text-color);
text-decoration: none;
}
.menu .logo-toggle{
display: none;
}
.nav-bar .nav-links{
display: flex;
align-items: center;
}
.nav-bar .nav-links li{
margin: 0 5px;
list-style: none;
}
.nav-links li a{
position: relative;
font-size: 17px;
font-weight: 400;
color: var(--text-color);
text-decoration: none;
padding: 10px;
}
.nav-links li a::before{
content: '';
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
height: 6px;
width: 6px;
border-radius: 50%;
background-color: var(--text-color);
opacity: 0;
transition: all 0.3s ease;
}
.nav-links li:hover a::before{
opacity: 1;
}
.nav-bar .darkLight-searchBox{
display: flex;
align-items: center;
}
.darkLight-searchBox .dark-light,
.darkLight-searchBox .searchToggle{
height: 40px;
width: 40px;
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
.dark-light i,
.searchToggle i{
position: absolute;
color: var(--text-color);
font-size: 22px;
cursor: pointer;
transition: all 0.3s ease;
}
.dark-light i.sun{
opacity: 0;
pointer-events: none;
}
.dark-light.active i.sun{
opacity: 1;
pointer-events: auto;
}
.dark-light.active i.moon{
opacity: 0;
pointer-events: none;
}
.searchToggle i.cancel{
opacity: 0;
pointer-events: none;
}
.searchToggle.active i.cancel{
opacity: 1;
pointer-events: auto;
}
.searchToggle.active i.search{
opacity: 0;
pointer-events: none;
}
.searchBox{
position: relative;
}
.searchBox .search-field{
position: absolute;
bottom: -85px;
right: 5px;
height: 50px;
width: 300px;
display: flex;
align-items: center;
background-color: var(--search-bar);
padding: 3px;
border-radius: 6px;
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
opacity: 0;
pointer-events: none;
transition: all 0.3s ease;
}
.searchToggle.active ~ .search-field{
bottom: -74px;
opacity: 1;
pointer-events: auto;
}
.search-field::before{
content: '';
position: absolute;
right: 14px;
top: -4px;
height: 12px;
width: 12px;
background-color: var(--nav-color);
transform: rotate(-45deg);
z-index: -1;
}
.search-field input{
height: 100%;
width: 100%;
padding: 0 45px 0 15px;
outline: none;
border: none;
border-radius: 4px;
font-size: 14px;
font-weight: 400;
color: var(--search-text);
background-color: var(--search-bar);
}
body.dark .search-field input{
color: var(--text-color);
}
.search-field i{
position: absolute;
color: var(--nav-color);
right: 15px;
font-size: 22px;
cursor: pointer;
}
body.dark .search-field i{
color: var(--text-color);
}
@media (max-width: 790px) {
nav .nav-bar .sidebarOpen{
display: block;
}
.menu{
position: fixed;
height: 100%;
width: 320px;
left: -100%;
top: 0;
padding: 20px;
background-color: var(--side-nav);
z-index: 100;
transition: all 0.4s ease;
}
nav.active .menu{
left: -0%;
}
nav.active .nav-bar .navLogo a{
font-family: 'Clash Display', sans-serif;
opacity: 0;
transition: all 0.3s ease;
}
.menu .logo-toggle{
display: block;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
}
.logo-toggle .siderbarClose{
color: var(--text-color);
font-size: 24px;
cursor: pointer;
}
.nav-bar .nav-links{
flex-direction: column;
padding-top: 30px;
}
.nav-links li a{
display: block;
margin-top: 20px;
}
}
Double Click to Copy
const body = document.querySelector("body"),
nav = document.querySelector("nav"),
modeToggle = document.querySelector(".dark-light"),
searchToggle = document.querySelector(".searchToggle"),
sidebarOpen = document.querySelector(".sidebarOpen"),
siderbarClose = document.querySelector(".siderbarClose");
let getMode = localStorage.getItem("mode");
if(getMode && getMode === "dark-mode"){
body.classList.add("dark");
}
// js code to toggle dark and light mode
modeToggle.addEventListener("click" , () =>{
modeToggle.classList.toggle("active");
body.classList.toggle("dark");
// js code to keep user selected mode even page refresh or file reopen
if(!body.classList.contains("dark")){
localStorage.setItem("mode" , "light-mode");
}else{
localStorage.setItem("mode" , "dark-mode");
}
});
// js code to toggle search box
searchToggle.addEventListener("click" , () =>{
searchToggle.classList.toggle("active");
});
// js code to toggle sidebar
sidebarOpen.addEventListener("click" , () =>{
nav.classList.add("active");
});
body.addEventListener("click" , e =>{
let clickedElm = e.target;
if(!clickedElm.classList.contains("sidebarOpen") && !clickedElm.classList.contains("menu")){
nav.classList.remove("active");
}
});