React Sidebar Goes Behind Background Image, but Over Navbar Title

Question

Two issues-

I built a react sidebar, and for some reason whenever toggling it, the bar is behind the page's background image. I tried putting z-index: -1; on the background image, but then the image disappears (though the side bar finally shows again.) I have messed around with "position", with no success either. How can I get my sidebar to go over my background image?

The other issue is that whenever toggling the sidebar, it cover the navbar's title. Any suggestions on how to get my navbar's title to move to the side when the sidebar is being toggled?

enter image description here

enter image description here

.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;
}

.nav-text a {
    text-decoration: none;
    color: #f5f5f5;
    font-size: 18px;
    width: 95%;
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 16px;
    border-radius: 4px;
}

.nav-text a:hover {
    background-color: #1a83ff;
}

.nav-menu-items {
    width: 100%;
}

.navbar-toggle {
    align-items: center;
    background-color: #060b26;
    display: flex;
    height: 80px;
    justify-content: start;
    position: absolute;
    width: 100%;
}

span {
    margin-left: 16px;
}

.backgroundImage {
  background-image: url('assets/dog.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
  filter: blur(2px);
  height: 100vh;
  width: 100%;
}


.dashboardButton {
  background: linear-gradient(
    #fd585c,
    #ec7278,
    #ff5b69
  );
  border-radius: 8px;
  color: #f5f5f5;
  display: grid; 
  font-style: "Poppins", sans-serif;
  height: 80px;
  left: 43%;
  letter-spacing: 3px;
  margin: auto; 
  place-items: center;
  position: absolute;
  text-decoration: none;
  top: 55%;
  width: 200px;
}


.welcomeHeader {
  color: #fd585c;
  display: center;
  font-size: 375%;
  left: 25%;
  position: absolute;
  top: 35%
} 


.welcomeDescription {
  color: #f5f5f5;
  font-size: 125%;
  left: 20%;
  position: absolute;
  top: 47%;
}

Answer 1

I ended up putting:

backgroundImage {
z-index: 1;
}

nav-menu.active {
z-index: 2;
}

That solved the issue!