background positioned paragraph is above hamburger menu
I have an issue with my hamburger menu not covering up the paragraph that is positioned in the middle of the background image. Could some one please tell me what i'm doing wrong? Google hasn't helped
.paragraph {
color: rgb(255, 255, 255);
font-family: Zilla Slab;
text-align: center;
font-size: 25px;
letter-spacing: 0.25px;
position: relative;
top: 22.5%;
line-height: 20px;
margin: 0 auto;
}
@media only screen and (max-width: 480px) {
.menu__item {
list-style-type: none;
}
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ #menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
#menu__box {
display: block;
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: 200px;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
z-index: 1;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
}.paragraph {
color: rgb(255, 255, 255);
font-family: Zilla Slab;
text-align: center;
font-size: 25px;
letter-spacing: 0.25px;
position: relative;
top: 22.5%;
line-height: 20px;
margin: 0 auto;
}
@media only screen and (max-width: 480px) {
.menu__item {
list-style-type: none;
}
#menu__toggle {
opacity: 0;
}
#menu__toggle:checked + .menu__btn > span {
transform: rotate(45deg);
}
#menu__toggle:checked + .menu__btn > span::before {
top: 0;
transform: rotate(0deg);
}
#menu__toggle:checked + .menu__btn > span::after {
top: 0;
transform: rotate(90deg);
}
#menu__toggle:checked ~ #menu__box {
left: 0 !important;
}
.menu__btn {
position: fixed;
top: 20px;
left: 20px;
width: 26px;
height: 26px;
cursor: pointer;
z-index: 1;
}
.menu__btn > span,
.menu__btn > span::before,
.menu__btn > span::after {
display: block;
position: absolute;
width: 100%;
height: 2px;
background-color: #616161;
transition-duration: .25s;
}
.menu__btn > span::before {
content: '';
top: -8px;
}
.menu__btn > span::after {
content: '';
top: 8px;
}
#menu__box {
display: block;
position: fixed;
top: 80px;
left: -100%;
width: 100%;
height: 200px;
margin: 0;
padding: 80px 0;
list-style: none;
background-color: #ECEFF1;
box-shadow: 2px 2px 6px rgba(0, 0, 0, .4);
transition-duration: .25s;
z-index: 1;
}
.menu__item {
display: block;
padding: 12px 24px;
color: #333;
font-family: 'Roboto', sans-serif;
font-size: 20px;
font-weight: 600;
text-decoration: none;
transition-duration: .25s;
}
.menu__item:hover {
background-color: #CFD8DC;
}
}
