I’m trying to figure out how to get this sidebar to work, but when I open it via the hamburger menu in a smaller screen, the sidebar opens underneath the content. How can I fix this? I tried following a tutorial to create this sidebar, but apparently I messed something up when I tried adding my own stuff and I’m not sure what to do. I’ve been playing around with elements in CSS, but it still comes out the same way.
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Fire Sans", sans-serif;
}
.app {
display: flex;
min-height: 100vh;
background-image: url(../site/images/bg2.jpeg);
}
.sidebar {
flex: 1 1 0;
max-width: 300px;
padding: 2rem 1rem;
background-color: #053853;
}
.sidebar h3 {
color: #f6da9b;
font-size: 0.75 rem;
text-transform: uppercase;
margin-bottom: 0.5em;
}
.sidebar .menu {
margin: 0 -1rem;
}
.sidebar .menu .menu-item {
display: block;
padding: 1em;
color: #fff;
text-decoration: none;
transition: 0.2 linear;
}
.sidebar .menu .menu-item:hover,
.sidebar .menu .menu-item.is-active {
color: #3bba9c;
border-right: 5px solid #3bba9c;
}
.content {
flex: 1 1 0;
padding: 2rem;
margin: 4rem;
width: 60%;
border: 3px solid #e9d397;
text-align: center;
border-radius: 10px;
backdrop-filter: blur(10px);
}
.content h1 {
color: #fff;
font-size: 2.5rem;
margin-bottom: 1rem;
}
.content p {
color: #fff;
}
.menu-toggle {
display: none;
position: fixed;
top: 2rem;
right: 2rem;
width: 60px;
height: 60px;
border-radius: 99px;
background-color: #2e3047;
cursor: pointer;
}
.hamburger {
position: relative;
top: calc(50% - 2px);
left: 50%;
transform: translate(-50%, -50%);
width: 32px;
}
.hamburger > span,
.hamburger > span::before,
.hamburger > span::after {
display: block;
position: absolute;
width: 100%;
height: 4px;
border-radius: 99px;
background-color: #fff;
transition-duration: 0.25s;
}
.hamburger > span::before {
content: "";
top: -8px;
}
.hamburger > span::after {
content: "";
top: 8px;
}
.menu-toggle.is-active .hamburger > span {
transform: rotate(45deg);
}
.menu-toggle.is-active .hamburger > span::before {
top: 0;
transform: rotate(0deg);
}
.menu-toggle.is-active .hamburger > span::after {
top: 0;
transform: rotate(90deg);
}
@media (max-width: 1024px) {
.sidebar {
max-width: 200px;
}
}
@media (max-width: 768px) {
.menu-toggle {
display: block;
}
.content {
padding: 2rem;
margin-top: 8rem;
}
.sidebar {
position: fixed;
top: 0;
left: -300px;
height: 100vh;
width: 100%;
max-width: 300px;
transition: 0.2 linear;
}
.sidebar.is-active {
left: 0;
}
}<!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>Responsive Sidebar</title>
<link rel="stylesheet" href="style3.css" />
</head>
<body>
<div class="app">
<div class="menu-toggle">
<div class="hamburger">
<span></span>
</div>
</div>
<aside class="sidebar">
<h3>Javascript</h3>
<nav class="menu">
<a href="#" class="menu-item is-active">Home</a>
<a href="#" class="menu-item">Week 1</a>
<a href="#" class="menu-item">Week 2</a>
<a href="#" class="menu-item">Week 3</a>
<a href="#" class="menu-item">Week 4</a>
<a href="#" class="menu-item">Week 5</a>
<a href="#" class="menu-item">Week 6</a>
<a href="#" class="menu-item">Week 7</a>
<a href="#" class="menu-item">Week 8</a>
<a href="#" class="menu-item">Week 9</a>
<a href="#" class="menu-item">Week 10</a>
</nav>
</aside>
<main class="content">
<h1>Welcome, Human!</h1>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Dolores aliquid impedit tenetur nam, vitae fugiat doloremque ut incidunt inventore quam qui laboriosam! Esse recusandae a inventore aliquam! Distinctio, expedita hic?</p>
</main>
</div>
<script>
const menu_toggle = document.querySelector('.menu-toggle');
const sidebar = document.querySelector('.sidebar');
menu_toggle.addEventListener('click', () => {
menu_toggle.classList.toggle('is-active');
sidebar.classList.toggle('is-active');
})
</script>
</body>
</html>
>Solution :
Can you try giving your sidebar a higher z-index than the content?
.sidebar {
z-index: 2;
}
.content {
z-index: 1;
}