Responsive navigation bar with mobile hamburger menu | HTML, CSS, JS

Responsive menu for your next HTML/CSS Website 

This detailed tutorial on YouTube will give you the fundamentals of designing a responsive navigation bar using HTML, CSS and Javascript. Credit to http://www.youtube.com/@Devistry

The full code for a responsive navigation bar using HTML/CSS/ JS is shown below: You are free to use the code below:

The HTML code for the responsive navigation menu

<nav id=”navbar” class=”navbar”>
<ul>
<li><a href=”/” class=”home”>Home</a></a></li>
<div class=”nav-toggle”>
<li><a href=”text.html”>About</a></li>
<li><a href=”text.html”>Services</a></li>
<li><a href=”text.html”>Prices </a></li>
<li><a href=”text.html”>Contacts</a></li>
</div>
</ul>
<button id=”hamburger-toggle” class=”hamburger”>
<div class=”icon-open”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” class=”icon icon-tabler icons-tabler-outline icon-tabler-menu-2″><path stroke=”none” d=”M0 0h24v24H0z” fill=”none”/><path d=”M4 6l16 0″ /><path d=”M4 12l16 0″ /><path d=”M4 18l16 0″ /></svg>
</div>
<div class=”icon-close”>
<svg xmlns=”http://www.w3.org/2000/svg” width=”24″ height=”24″ viewBox=”0 0 24 24″ fill=”none” stroke=”currentColor” stroke-width=”2″ stroke-linecap=”round” stroke-linejoin=”round” class=”icon icon-tabler icons-tabler-outline icon-tabler-x”><path stroke=”none” d=”M0 0h24v24H0z” fill=”none”/><path d=”M18 6l-12 12″ /><path d=”M6 6l12 12″ /></svg>
</div>
</button>

</nav>

The CSS code for the responsive navigation menu

body {
margin: unset;
font-family: Arial, sans-serif;
}

.navbar {
background: blue;
color: #ffffff;
position: relative;
}

.navbar ul {
margin: unset;
padding: unset;
list-style:none;
display: flex;
}

.navbar a {
padding: 1em;
color: inherit;
text-decoration:none;
display: inline-block;
}

.navbar a.home {
background: #cc540e;
}

.navbar a:hover {
background: green;
}

.navbar .nav-toggle {
display: flex;
}

.navbar .hamburger {
position: absolute;
top:0;
right:0;
border: unset;
background: unset;
cursor: pointer;
display: none;
}

.navbar .hamburger svg {
stroke: #ffffff;
}

.navbar .hamburger .icon-close {
display: none;
}

/* Media Queries */
@media screen and (max-width: 650px) {
.navbar.open ul {
display: block;
}

.navbar.open .nav-toggle {
display: block;
}

.navbar.open a {
display: block;
}

.navbar .nav-toggle {
display: none;
}

.navbar .hamburger {
display: block;
}

.navbar.open .hamburger .icon-open {
display: none;
}

.navbar.open .hamburger .icon-close {
display: block;
}

}

JavaScipt code to toggle the hamburger button

const hamburgerToggle = document.querySelector(“#hamburger-toggle”);
const navbar = document.querySelector(“#navbar”);
hamburgerToggle.addEventListener(“click”, onHamburgerClick);

function onHamburgerClick() {
if(!navbar.classList.contains(“open”)) {
navbar.classList.add(“open”);
} else {
navbar.classList.remove(“open”);
}

}