Попытка получить Navbar сверху и липкий при прокрутке

Question

Итак, у меня есть меню CSS navbar и гамбургер, над которым я работаю, и я не обязательно делал это раньше. Я использую карусель Boostraps и мою собственную панель навигации. В мобильном представлении я пытаюсь заставить меню навигационной панели выскакивать сверху карусели, но по какой-то причине карусель, кажется, блокирует нижнюю часть меню. Итак, два вопроса: 1) Как сделать так, чтобы навигационная панель на мобильном телефоне была сверху (всего в принципе), как я хочу, чтобы она была 2) закреплена сверху для прокрутки? Вот код и кодовая ручка: Мобильный Navbar Codepen

HTML

<header>

<nav id="nav-mobile" >
  <span class="checkbox-container">
    <input class="checkbox-trigger" type="checkbox"/>
    <span class="menu-content">
      <ul>
        <li>Home</li>
        <li>About</li>
        <li>Videos</li>
      </ul>
      <span class="hamburger-menu"></span>
    </span>
  </span>
</nav>

<nav id="nav-main">
  <a href="#">Navbar</a>
  <div>
    <div>
      <a href="#">Home <span class="sr-only">(current)</span></a>
      <a href="#">About</a>
      <a href="#">Videos</a>
    </div>
  </div>
</nav>

  <div class="bd-example new">
    <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
      <ol class="carousel-indicators">
        <li data-target="#carouselExampleCaptions" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="1"></li>
        <li data-target="#carouselExampleCaptions" data-slide-to="2"></li>
      </ol>
      <div class="carousel-inner">
        <div class="carousel-item active" data-interval="50000">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
            <rect width="100%" height="100%" fill="#777" opacity="0%"></rect>
          </svg>
          <div class="carousel-caption d-md-block">
            <h5>Lorem Ipsum</h5>
            <p>Nulla vitae elit libero, a pharetra augue mollis interdum.</p>
            <button type="button" name="button">My Twitch Channel</button>
          </div>
        </div>
        <div class="carousel-item" data-interval="50000">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
            <rect width="100%" height="100%" fill="#777" opacity="0%"></rect>
          </svg>
          <div class="carousel-caption d-md-block">
            <h5>Lorem Ipsum</h5>
            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            <button type="button" name="button">My Twitch Channel</button>
          </div>
        </div>
        <div class="carousel-item" data-interval="50000">
          <svg class="bd-placeholder-img" width="100%" height="100%" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMid slice" focusable="false" role="img">
            <rect width="100%" height="100%" fill="#777" opacity="0%"></rect>
          </svg>
          <div class="carousel-caption d-md-block">
            <h5>Past Streams</h5>
            <p>Praesent commodo cursus magna, vel scelerisque nisl consectetur.</p>
            <button type="button" name="button">Our Videos</button>
          </div>
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleCaptions" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleCaptions" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
  </div>

<article class="welcome">
<h1>Hello World</h1>
<p>Lorem Ipsum Lorem Ipsum Lorem text</p>
<p>Lorem Ipsum Lorem Ipsum Lorem text</p>
<p>Lorem Ipsum Lorem Ipsum Lorem text</p>
<p>Lorem Ipsum Lorem Ipsum Lorem text</p>
<p>Lorem Ipsum Lorem Ipsum Lorem text</p>
</article>

CSS

    html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    scroll-behavior: smooth;
    background-color: #ffffff;
    color: #c9c9c9;
    /* font-family: */
}

/* Mobile Navbar */

/* Menu Content styling */
.checkbox-container {
    display: block;
    float: right;
    width: 50px;
    height: 50px;
    position: relative;
    background: #182825;
}

.menu-content {
    display: flex;
    background: #ffffff;
    color: grey;
    float: right;
}

.menu-content ul {
    display: block;
    padding-left: 0;
    padding-top: 1em;
    padding-bottom: 1em;
    margin: 0;
    width: 0px;
    height: 0px;
    overflow: hidden;
    transition: height 0.3s ease 0.7s, width 0.7s ease;
}

.menu-content ul li {
    list-style: none;
    padding-top: 1em;
    padding-bottom: 1em;
    cursor: pointer;
    transition: color 0.5s, background 0.5s;
}

.menu-content ul li:hover {
    color: #0cd6ad;
    background: white;
}

/* Hamburger Menu */
.checkbox-trigger {
    opacity: 0;
    position: absolute;
    width: 50px;
    height: 50px;
    left: 0px;
    cursor: pointer;
    z-index: 5;
}

.hamburger-menu,
.hamburger-menu::before,
.hamburger-menu::after {
    display: block;
    position: absolute;
    background: grey;
    width: 40px;
    height: 4px;
    margin: 1.3em 3em;
    transition: background 0.3s;
}

.hamburger-menu::before,
.hamburger-menu::after {
    content: "";
    position: absolute;
    margin: -0.7em 0 0;
    transition: width 0.7s ease 0.3s, transform 0.7s ease 0.3s;
}

.hamburger-menu::after {
    margin-top: 0.7em;
}

.hamburger-menu {
    position: relative;
    display: block;
    margin: 0;
    margin-top: 1.45em;
    margin-right: 0.35em;
    margin-left: 0.35em;
    margin-bottom: 1.45em;
    transition: width 0.3s ease;
}

/* Hamburger Toggle */
.checkbox-trigger:checked {
    right: 202px;
}

.checkbox-trigger:checked + .menu-content .hamburger-menu {
    width: 2em;
    transition: width 0.7s ease 0.7s;
}

.checkbox-trigger:checked + .menu-content .hamburger-menu::before {
    width: 1.2em;
    transform: rotate(-35deg);
    margin-top: -0.4em;
}

.checkbox-trigger:checked + .menu-content .hamburger-menu::after {
    width: 1.2em;
    transform: rotate(35deg);
    margin-top: 0.4em;
}

.checkbox-trigger:checked + .menu-content ul {
    width: 200px;
    height: 200px;
    transition: width 0.7s ease 0.3s, height 0.3s ease;
}


/* Header */

/* .bd-example {
  z-index: -5;
} */

.carousel-item {
  height: 35em;
}

.carousel-inner {
  background-image: url('https://source.unsplash.com/random');
  background-size: cover;
  background-attachment: fixed;
}


/* Welcome */

.welcome {
  margin: 5em 2em;
}

.welcome h1 {
  margin-bottom: 1em;
}


/* Media Queries */

@media screen and (min-width: 800px) {
  .nav-toggle-label {
    display:none;
  }

  header {
    display: grid;
    grid-template-columns: 1fr auto minmax(600px, 1fr) 3fr;
  }

  .logo {
    grid-column: 2 / span 1;
  }

  nav {
    all: unset;
    grid-column: 3 / 4;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  nav ul {
    display: flex;
    justify-content: flex-end;
  }

  nav li {
    margin-left: 3em;
    margin-bottom: 0;
  }

  nav a {
    opacity: 1;
    position: relative;
  }

  nav a::before {
    content: "";
    display: block;
    height: 5px;
    background: black;
    position: absolute;
    top: -.75em;
    left: 0;
    right: 0;
    transform: scale(0, 1);
    transition: transform ease-in-out 250ms;
  }

  nav a:hover::before {
    transform: scale(1, 1);
  }
}

@media only screen and (min-width: 1024px) {

  .nav-link::after {
    content: "/";
    margin: 0 1rem;
  }

  .navbar-nav {
    padding-left: 2em;
  }

}

@media only screen and (min-width: 768px) {

  #nav-mobile {
    display: none;
  }



}

@media only screen and (max-width: 768px) {

  #nav-main {
    display: none;
    z-index: 1;
  }


}