In this tutorial, you will learn how to create a simple Responsive header navigation bar with a logo using pure HTML, CSS, and JavaScript.
Click the following button to see the demo of this responsive navbar –
Markup (HTML) code of the responsive navbar with logo
<!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>CSS Responsive Navigation Bar - Devbabu.Com</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="logo">
<a href="#"><img src="logo.png" alt="DevBabu.com"></a>
</div>
<div class="navbar">
<div class="close-nav"><button>×</button></div>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</div>
<div class="menu-bar">
<button><i></i></button>
</div>
</div>
</header>
<div class="container">
<!-- Content -->
</div>
<script>
const theBody = document.querySelector('body');
const openNav = document.querySelector('.menu-bar button');
const closeNav = document.querySelector('.close-nav button');
const Navbar = document.querySelector('.navbar');
// function bodyScroll(){
// if(Navbar.classList.contains('show')){
// theBody.classList.add('hide-scroll');
// }
// else if(theBody.classList.contains('hide-scroll')){
// theBody.classList.remove('hide-scroll');
// }
// }
function showHide(){
Navbar.classList.toggle('show');
// bodyScroll();
}
openNav.onclick = showHide;
closeNav.onclick = showHide;
</script>
</body>
</html>
CSS code (style.css)
@import url("https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap");
*,
*::before,
*::after {
box-sizing: border-box;
line-height: 1.5em;
}
html {
font-size: 16px;
scroll-behavior: smooth;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
font-family: "Open Sans", sans-serif;
background-color: #f7f7f7;
}
header {
background-color: #ffffff;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -4px rgba(0, 0, 0, 0.1);
padding: 10px 20px;
}
header .wrapper {
max-width: 1000px;
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
}
header .logo img {
height: 50px;
display: block;
}
.navbar {
position: fixed;
top: 0;
left: 100%;
margin: 0;
width: 100%;
height: 100%;
background-color: white;
padding: 20px;
transition: left 0.3s;
}
.navbar.show {
left: 0 !important;
}
.hide-scroll {
overflow: hidden;
}
.navbar ul {
all: unset;
list-style-type: none;
display: flex;
flex-direction: column;
align-items: center;
gap: 25px;
}
.navbar ul a {
all: unset;
color: #444444;
text-transform: uppercase;
cursor: pointer;
font-weight: bold;
font-size: 28px;
}
.navbar ul a:hover {
color: #111111;
text-decoration: underline overline;
text-decoration-thickness: 3px;
}
.close-nav {
text-align: right;
margin-bottom: 20px;
}
.close-nav button {
all: unset;
background: #f7f7f7;
font-size: 42px;
cursor: pointer;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 15px;
border-radius: 3px;
color: #444444;
}
.close-nav button:hover {
color: #222222;
background: white;
}
.menu-bar button {
border: 1px solid rgba(0, 0, 0, 0.1);
background: #f7f7f7;
height: 50px;
width: 50px;
padding: 5px 10px;
cursor: pointer;
border-radius: 3px;
}
.menu-bar i {
display: block;
border-top: 3px solid #444444;
border-bottom: 3px solid #444444;
}
.menu-bar i::after {
display: block;
content: "";
border-top: 3px solid #444444;
margin: 6px 0;
}
.menu-bar button:hover {
background: white;
}
.menu-bar button:hover i {
border-color: #222222;
}
.container {
max-width: 900px;
margin: 0 auto;
padding: 30px;
}
@media (min-width: 550px) {
.navbar {
all: unset;
display: block;
}
.navbar ul {
flex-direction: row;
gap: 20px;
}
.navbar ul a {
font-size: inherit;
}
.close-nav,
.menu-bar {
display: none;
}
}