I am using Bootstrap.
I want to fix the navigation bar and scroll the page.

I could fix the navigation bar, but I can't scroll and I can't see the bottom screen.
If i click the navigation bar, you can display the lower screen.

Applicable source code
<!doctype html><html><head><!-- Required meta tags --><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><!-- Bootstrap CSS --><link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+jcSan"cross7k"
  <link rel="stylesheet" type="text/css" href="style.css"><title>Hello, world!</title><link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP:[email protected];700&display=swap" rel="stylesheet"></head><body data-spy="scroll" data-target="#navbarResponsive"><!---- start home ---> <!--- Navigation ---><nav>            <button type="button" data-toggle="collapse" data-target="#navbarResponsive">        <span></span>    </button>                <ul>            <li>                  Home              </li>            <li>                  Course              </li>            <li>                  Portfolio              </li>            <li>                  Team              </li>            <li>                  Contact              </li>        </ul>        </nav><!--- start image slider--->    <ol>        <li data-target="#carouselExampleIndicators" data-slide-to="0"></li>        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>    </ol>                <!--- slide1--->                                              Welcome To NUno                    Animated Bootstrap Theme                    Get Started                                      <!---slider2--->                    <!---slider3--->                <!--- end carousel--->    <!---prev next button-->                <span aeia-hidden="true"></span>                        <span aeia-hidden="true"></span>              <!--- end image slider---> <!---- end home --->
  <!---- start course --->                Nuno THeme Advanced      <p>Learn Bootstrap by creating an advanced Bootstrap4 Responsive website template from scratch, widh no step slipped</p>      93% OFF COUPON "NUN093"           <!---- end course --->
  <!---- start portfolio --->         <!---- end portfolio --->
   <!---- start team --->    <!---- end team --->
   <!---- start contact --->         <!---- end contact --->
  <!-- Optional JavaScript --><!-- jQuery first, then Popper.js, then Bootstrap JS --><script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAony" cross</script><script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/js/bootstrap.min.js" integrity="sha384-OgVRvuATP1z7JjHLkuOU7Xw704+h835Lr+6QL9UvYjZE3Ipu6Tp75j7Bh/kR0JKI" crossorigin="anony script></body></html>
    overflow: hidden;
    color: #505962;
    font-family:'Noto Sans JP', sans-serif;
/*--- navbar ---*/
.navbar {
    text-transform: uppercase;
    font-weight: 700;
    font-size: .9rem;
    letter-spacing: .1rem;
    background: rgba(0, 0, 0, .6)!important;
.navbar-brand img {
    height: 3rem;
.navbar-nav li {
    padding-right: .7rem;
.navbar-dark .navbar-nav .nav-link {
    color: white;
    padding-top: .8rem;
.navbar-dark .navbar-nav .nav-link.active,
.navbar-dark .navbar-nav .nav-link:hover {
    color: #1ebba3;
.carousel-item {
    height: 100vh;
What I tried

I suspected a misspelling, but apparently the spelling is correct.