Slide In Mobile Menu

Hamburger Icon

				
					<div class="hamburger">
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
</div>
				
			

Hamburger Icon Styles

				
					:root {
    --size: 40px;  
    --bar-thickness: 2px;  
    --bar-gap: 8px;  
    --bar-color: #04BCFC; 
}

.hamburger {
    width: var(--size);
    height: calc(var(--bar-thickness) * 3 + var(--bar-gap) * 2);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    cursor: pointer;
    transition: transform 0.3s ease;
}

.bar {
    width: 100%;
    height: var(--bar-thickness);
    background-color: var(--bar-color);
    border-radius: calc(var(--bar-thickness) / 2);
    transition: all 0.3s ease;
    transform-origin: center;
}

.hamburger.active .bar:nth-child(1) {
    transform: translateY(calc(var(--bar-gap) + var(--bar-thickness))) rotate(45deg);
}

.hamburger.active .bar:nth-child(2) {
    opacity: 0;
}

.hamburger.active .bar:nth-child(3) {
    transform: translateY(calc(-1 * (var(--bar-gap) + var(--bar-thickness)))) rotate(-45deg);
}
				
			

Menu Container Styles

				
					.off-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 75vw;
    transform: translateX(-100%);
    transition: transform 0.25s cubic-bezier(0.68, -0.05, 0.27, 1);
    z-index: 9999;
}

.off-canvas.open {
    transform: translateX(0);
}

				
			

Hamburger Script