Skip to content

Instantly share code, notes, and snippets.

@Kernix13
Last active November 22, 2022 13:30
Show Gist options
  • Save Kernix13/2342fd84e3dbf028800710ec68b56e30 to your computer and use it in GitHub Desktop.
Save Kernix13/2342fd84e3dbf028800710ec68b56e30 to your computer and use it in GitHub Desktop.
Mobile first responsive hamburger menu
*, *::before, *::after {
box-sizing: border-box;
}
body {
padding: 0;
margin: 0;
}
header {
background-color: #262626;
}
/* need a solution for the next 2 properties */
li {
list-style: none;
}
a {
color: #fff;
text-decoration: none;
}
.nav-bar {
min-height: 4.375em;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1.5em;
}
.nav-branding {
font-size: 2rem;
font-weight: 600;
}
.nav-menu {
position: fixed;
left: -100%;
top: 3.375em;
flex-direction: column;
background-color: #262626;
width: 100%;
text-align: center;
transition: 750ms;
}
.nav-menu.active {
left: 0;
}
.nav-item {
margin: 1em 0;
}
.nav-link {
transition: 400ms ease;
}
.nav-link:hover {
color: dodgerblue;
}
.hamburger {
cursor: pointer;
}
.bar {
display: block;
background-color: #fff;
/* The following 3 properties are essential in creating the "X" when the hamburger is clicked.
If you change just 1 of them, then you need to find the proper combination for the other 2 */
width: 24px;
height: 2px;
margin: 6px auto;
/* The same properties but in em units */
/* width: 1.5625em; */
/* height: 0.1875em; */
/* margin: 0.3125em auto; */
/* -webkit-transition: all 300ms ease; */
transition: all 300ms ease-in-out;
}
.hamburger.active .bar:nth-child(2) {
opacity: 0
}
.hamburger.active .bar:nth-child(1) {
transform: translateY(8px) rotate(45deg);
}
.hamburger.active .bar:nth-child(3) {
transform: translateY(-8px) rotate(-45deg);
}
@media (min-width: 768px) {
.nav-menu {
position: static;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1em;
width: auto;
}
.hamburger {
display: none;
}
}
<header>
<nav class="nav-bar">
<a href="#" class="nav-branding">J.K.</a>
<ul class="nav-menu">
<li class="nav-item">
<a href="#" class="nav-link">Home</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">About</a>
</li>
<li class="nav-item">
<a href="#" class="nav-link">Contact</a>
</li>
</ul>
<div class="hamburger">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</div>
</nav>
</header>
const hamburger = document.querySelector(".hamburger");
const navMenu = document.querySelector(".nav-menu");
hamburger.addEventListener("click", () => {
hamburger.classList.toggle("active");
navMenu.classList.toggle("active");
})
// close mobile menu
document.querySelectorAll(".nav-link").forEach(n => n.addEventListener("click", () => {
hamburger.classList.remove("active");
navMenu.classList.remove("active");
}))
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment