Issue Number One-
Having trouble with a react sidebar that appears behind the background image when toggled. I attempted adjusting the z-index and position properties without success. Any tips on how to bring the sidebar in front of the background image?
Second Issue-
The sidebar covers the navbar's title when toggled. How can I make the navbar's title move sideways when the sidebar is activated?
Check out this image for reference
.navbar {
align-items: center;
background-color: #060b26;
color: white;
display: flex;
height: 80px;
justify-content: start;
text-align: right;
}
.title {
margin-left: 20px;
}
.menu-bars {
margin-left: 2rem;
font-size: 2rem;
background: none;
}
.nav-menu {
background-color: #060b26;
width: 250px;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
top: 0;
left: -100%;
transition: 850ms;
}
.nav-menu.active {
left: 0;
position: absolute;
transition: 350ms;
}
.nav-text {
display: flex;
justify-content: start;
align-items: center;
padding: 8px 0px 8px 16px;
list-style: none;
height: 60px;
}
...
.welcomeDescription {
color: #f5f5f5;
font-size: 125%;
left: 20%;
position: absolute;
top: 47%;
}