После нажатия на значок гамбургера, меню не отображается над слайд-шоу изображений на главной странице

Question

Я не знаю, как показать меню над слайд-шоу изображений после нажатия на значок гамбургера. Я использовал z-index и .addClass, чтобы добавить свойство diplay: none в #slideshow. Это не сработало. Я не знаю, что я могу сделать дальше.

https://jsfiddle.net/ft31scgw/

main. js

<script>
$(document).ready(() => {
    $('#slideshow .slick').slick({
        autoplay: true,
        autoplaySpeed: 2000,
        dots: true,
    });
});

$(document).ready(() => {
    $('#userReview .slick').slick({
        autoplay: true,
        autoplaySpeed: 8000,
        dots: true,
    });
});
    function hMenu() {
        var menu = document.getElementById("toggle");
        if(menu) {
            var hide = $("#slideshow").hide();
            } else {
            var show = $("#slideshow").show();
            }
    }
</script>

style. css enter описание изображения здесь

@media only screen and (max-width: 736px) {
    #slideshow {
    position: relative;
    top: 0px;
    left: 0px;
}
#slideshow {
    div {
            width: 100%;
            height: 300px;
    img {
            width: 100%;
            height: auto;
        }
    }
}
    button {
    text-transform: uppercase;
    font-weight: bold;
    }
    .logo img {
        width: 80%;
        max-width: 473px;
        height: 50px;
    }
    label{
        display: block;
        cursor: pointer;
        z-index: 10;
    }
    .menu {
        text-align: center;
        width: 100%;
        display: none;
        background: black;
    }
    .menu a {
         display: block;
         border-bottom: 1px solid #EAEAEB;
         margin: 1;
    }
    #toggle:checked + .menu {
        display: block;
        z-index: 10;
    }
    #slideshow {
        z-index: 0;
    }
    .disappear {
        display:none;
        z-index: -2;
    }

} / * @media min-width 736px * /

index. html

Answer 1

Полезно знать, что z-index определяет порядок стека родственных элементов элементов. В вашем случае <div class="header"> нужен z-индекс больше <section id="slideshow">. z-index работает только с позиционированными элементами, поэтому они оба должны иметь position:relative. Я сделал рабочий пример для вас на jsFiddle .