Bootstrap Navbar not working when in mobile mode

I’m quite new to BOOTSTRAP 5 (Web Development in general) and I am currently trying to make a simple website with it. I’ve selected a navigation bar but whenever I change my browser to mobile mode, the drop-down which appears does not work at all and all my elements in my navbar disappear. Any help would be grand!

<!DOCTYPE html>
    <html>
        <head>
            <title>Hello World!</title>
            <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

            <style type="text/css">
                #jumbotron{
                    background-image: url(bg1.jpg);
                    height: 25rem;
                }

                .center {
                  text-align: center;
                }

                #cardDeck{
                  margin-left: 1rem;
                }

                #logo-space{
                  background-color: blue;
                  width: auto;
                  height: auto;
                }

                #logo{
                  width: 300px;
                  height: 120px;
                  padding: 15px;
                  margin-left: 5rem;
                }
                
                #FMS-BTN{
                    width: 12rem;
                    position: relative;
                    top: 3rem;
                    left: 5rem;
                }
            </style>
        </head>
        
        <body>
            <div id="logo-space" class="row">
              <div class="col">
                <img id="logo" src="img/logo.png" alt="">
              </div>
              <div class="col">
              </div>
              <div class="col">
                <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
                  <img src="" alt="">Head to FMS</a>
              </div>
            </div>
          
            <div id="nav-area">
              <div class="row">
                <div class="col">

                  <nav class="navbar navbar-expand-lg navbar-light bg-light">
                    <div class="container-fluid">
                      
                      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

                      <div class="collapse navbar-collapse" id="navbarText">

                        <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                          <li class="nav-item">
                            <a class="nav-link active" aria-current="page" href="#">HOME</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">ABOUT US</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">DIVISIONS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">APPEALS</a>
                          </li>
                          <li class="nav-item">
                            <a class="nav-link" href="#">FEED</a>
                          </li>
                        </ul>

                        <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
                      </div>
                    </div>
                  </nav>

                </div>
              </div>
            </div>
        </body>   
    </html>

>Solution :

You also need to link the JavaScript Bundle for Bootstrap. The mobile menu only works with JS.

The JS Bundle code is:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

All you gotta do is to add the JS dependency to make it work:

<!DOCTYPE html>
<html>

<head>
  <title>Hello World!</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X+R7YkIZDRvuzKMRqM+OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">


  <!-- JavaScript Bundle with Popper -->
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-A3rJD856KowSb7dwlZdYEkO39Gagi7vIsF0jrRAoQmDKKtQBHUuLZ9AsSv4jD4Xa" crossorigin="anonymous"></script>

  <style type="text/css">
    #jumbotron {
      background-image: url(bg1.jpg);
      height: 25rem;
    }
    
    .center {
      text-align: center;
    }
    
    #cardDeck {
      margin-left: 1rem;
    }
    
    #logo-space {
      background-color: blue;
      width: auto;
      height: auto;
    }
    
    #logo {
      width: 300px;
      height: 120px;
      padding: 15px;
      margin-left: 5rem;
    }
    
    #FMS-BTN {
      width: 12rem;
      position: relative;
      top: 3rem;
      left: 5rem;
    }
  </style>
</head>

<body>
  <div id="logo-space" class="row">
    <div class="col">
      <img id="logo" src="img/logo.png" alt="">
    </div>
    <div class="col">
    </div>
    <div class="col">
      <a id="FMS-BTN" href="#" class="btn btn-primary" tabindex="-1" role="button" aria-disabled="true">
        <img src="" alt="">Head to FMS</a>
    </div>
  </div>

  <div id="nav-area">
    <div class="row">
      <div class="col">

        <nav class="navbar navbar-expand-lg navbar-light bg-light">
          <div class="container-fluid">

            <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span class="navbar-toggler-icon"></span>
                      </button>

            <div class="collapse navbar-collapse" id="navbarText">

              <ul class="navbar-nav me-auto mb-2 mb-lg-0">
                <li class="nav-item">
                  <a class="nav-link active" aria-current="page" href="#">HOME</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">ABOUT US</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">DIVISIONS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">APPEALS</a>
                </li>
                <li class="nav-item">
                  <a class="nav-link" href="#">FEED</a>
                </li>
              </ul>

              <span class="navbar-text">
                          <a href="url">APPLY NOW</a>
                        </span>
            </div>
          </div>
        </nav>

      </div>
    </div>
  </div>
</body>

</html>

Leave a Reply