The Mobile Menu is missing when I in using of a Page Hero.

Hello team,
I have added a simple slider to my Page Hero by adding some html and css. Everything working well, but the mobile menu is missing.
It would be a great honor for me if the problem can be solved。

The Page Hero html I have added:

<input type="radio" id="s-1" name="slider-control" checked="checked">
<input type="radio" id="s-2" name="slider-control">
<input type="radio" id="s-3" name="slider-control">
	<div class="js-slider">
  <figure class="js-slider_item img-1">
    <div class="js-slider_img">
      <img class="c-img-w-full" src="https://zdaben.com/wp-content/uploads/2019/06/poster_2_up-1.jpg" alt="">
    </div>
   </figure>
  <figure class="js-slider_item img-2">
    <div class="js-slider_img">
      <img class="c-img-w-full" src="https://zdaben.com/wp-content/uploads/2019/06/poster_3_up-1.jpg" alt=""></div>
  </figure>
  <figure class="js-slider_item img-3">
    <div class="js-slider_img">
      <img class="c-img-w-full" src="https://zdaben.com/wp-content/uploads/2019/06/poster_4_up-1.jpg" alt=""></div>
   </figure>
  <div class="js-slider_nav">
    <label class="js-slider_nav_item s-nav-1 prev" for="s-3"></label>
    <label class="js-slider_nav_item s-nav-1 next" for="s-2"></label>
    <label class="js-slider_nav_item s-nav-2 prev" for="s-1"></label>
    <label class="js-slider_nav_item s-nav-2 next" for="s-3"></label>
    <label class="js-slider_nav_item s-nav-3 prev" for="s-2"></label>
    <label class="js-slider_nav_item s-nav-3 next" for="s-1"></label>

The Css I have added:

input[type="radio"] {
  display: none;
}
.js-slider {
  position: relative;
  width: 100%;
  height: 70vh;
  margin: 0 auto;
}
.js-slider_item {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  opacity: 0;
  visibility: hidden;
  transform-origin: right center;
  transform: translate3d(0%, 0%, 0) rotateY(30deg) scaleX(0.95);
  transition: all 1s ease,transform 1s cubic-bezier(0.43, 0.28, 0.51, 1);
}
#s-1:checked ~ .js-slider .js-slider_item.img-1,
#s-2:checked ~ .js-slider .js-slider_item.img-2,
#s-3:checked ~ .js-slider .js-slider_item.img-3 {
  opacity: 1;
  visibility: visible;
  transform-origin: left center;
  transform: translate3d(0, 0, 0) rotateY(0deg) scaleX(1);
}
.js-slider_img {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.c-img-w-full {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 100%;
  object-fit:cover;
  transform: translate3d(-50%, -50%, 0);
}
.c-img-h-full {
  position: absolute;
  top: 50%;
  left: 50%;
  width: auto;
  height: 100%;
  transform: translate3d(-50%, -50%, 0);
}
.js-slider_nav {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  transform: translate3d(0, -50%, 0);
}
.js-slider_nav_item.prev {
  left: 10%;
}
.js-slider_nav_item.next {
  right: 10%;
  transform: rotateY(180deg);
}
.js-slider_nav_item {
  position: absolute;
  display: none;
  width: 4rem;
  height: 4rem;
  border: 1px solid #e60012;
  border-radius: 50%;
  cursor: pointer;
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.js-slider_nav_item:before {
  content: "";
  display: block;
  position: absolute;
  left: 1rem;
  top: 55%;
  width: 1rem;
  height: 1px;
  background-color: #e60012;
  transform-origin: left bottom;
  transform: translate3d(0, -50%, 0) rotate(-45deg);
  transition: 1s all cubic-bezier(0.075, 0.82, 0.165, 1);
}
.js-slider_nav_item:hover {
   transform: translate3d(-30%, 0, 0);
}
.js-slider_nav_item.next:hover {
   transform: rotateY(180deg) translate3d(-30%, 0, 0);
}
.js-slider_nav_item:hover:before {
  transform: translate3d(0, -50%, 0) rotate(-30deg);
}
.js-slider_nav_item:after {
  content: "";
  position: absolute;
  top: 55%;
  left: 50%;
  width: 2rem;
  height: 1px;
  background-color: #e60012;
  transform: translate3d(-50%, -50%, 0);
}
#s-1:checked ~ .js-slider .js-slider_nav .s-nav-1,
#s-2:checked ~ .js-slider .js-slider_nav .s-nav-2,
#s-3:checked ~ .js-slider .js-slider_nav .s-nav-3 {
  display: block;
}