Bootstrap Navbar not working when in mobile mode-CodePudding

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/[email protected]/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" >
              <div >
                <img id="logo" src="img/logo.png" alt="">
              </div>
              <div >
              </div>
              <div >
                <a id="FMS-BTN" href="#"  tabindex="-1" role="button" aria-disabled="true">
                  <img src="" alt="">Head to FMS</a>
              </div>
            </div>
          
            <div id="nav-area">
              <div >
                <div >

                  <nav >
                    <div >
                      
                      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
                        <span ></span>
                      </button>

                      <div  id="navbarText">

                        <ul >
                          <li >
                            <a  aria-current="page" href="#">HOME</a>
                          </li>
                          <li >
                            <a  href="#">ABOUT US</a>
                          </li>
                          <li >
                            <a  href="#">DIVISIONS</a>
                          </li>
                          <li >
                            <a  href="#">APPEALS</a>
                          </li>
                          <li >
                            <a  href="#">FEED</a>
                          </li>
                        </ul>

                        <span >
                          <a href="url">APPLY NOW</a>
                        </span>
                      </div>
                    </div>
                  </nav>

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

CodePudding user response：

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/[email protected]/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/[email protected]/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/[email protected]/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" >
    <div >
      <img id="logo" src="img/logo.png" alt="">
    </div>
    <div >
    </div>
    <div >
      <a id="FMS-BTN" href="#"  tabindex="-1" role="button" aria-disabled="true">
        <img src="" alt="">Head to FMS</a>
    </div>
  </div>

  <div id="nav-area">
    <div >
      <div >

        <nav >
          <div >

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

            <div  id="navbarText">

              <ul >
                <li >
                  <a  aria-current="page" href="#">HOME</a>
                </li>
                <li >
                  <a  href="#">ABOUT US</a>
                </li>
                <li >
                  <a  href="#">DIVISIONS</a>
                </li>
                <li >
                  <a  href="#">APPEALS</a>
                </li>
                <li >
                  <a  href="#">FEED</a>
                </li>
              </ul>

              <span >
                          <a href="url">APPLY NOW</a>
                        </span>
            </div>
          </div>
        </nav>

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

</html>

CodePudding user response：

You can use CSS Media Queries to determine what action to do based on the screen size. Here, you would want to change the size of the nav bar based on the screen size.

@media (max-width: 600px) { 

*This is for phones, for example (you might need to find more accurate pixel counts)*

}