stackoom
  简体   繁体   中英

Navbar button not working on small devices

 原文  2022-08-19 07:15:03  2   2    javascript/ html/ jquery/ css/ twitter-bootstrap

Question

so basically when I try to open my website on a small device, I have the bootstrap navbar set to collapse but the button does not work. I would highly appreciate some help. Everything else is working but this is the one thing I can't get to work. I've tried everything I could think of.

HTML 

      <html lang="en">
  <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Impressions</title>
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
      <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">
  </head>
  <body data-spy="scroll" data-target=".navbar" data-offset="50">
    
    <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm">
      <div class="container-fluid">
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav mx-auto mr-auto">
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block active" href="#home">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#skills">Skills</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#projects">Projects</a>
            </li>
            <li class="nav-item">
              <a class="nav-link py-1 d-none d-md-inline-block" href="#about">About</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>


    
    <!-- JavaScript Bundle with Popper -->

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


  <script src="index.js"charset="UTF-8"></script>

  </body>
  </html>

2 answers

solution1
 0  2022-08-19 07:49:41

Your menu items are not showing due to the d-none class

 <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Impressions</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <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"> </head> <body data-spy="scroll" data-target=".navbar" data-offset="50"> <nav id="navbar" class="navbar fixed-top navbar-custom navbar-expand-sm"> <div class="container-fluid"> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNav"> <ul class="navbar-nav mx-auto mr-auto"> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block active" href="#home">Home</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#skills">Skills</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#projects">Projects</a> </li> <li class="nav-item"> <a class="nav-link py-1 d-md-inline-block" href="#about">About</a> </li> </ul> </div> </div> </nav> <:-- JavaScript Bundle with Popper --> <script src="https.//ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min:js"></script> <script src="https.//cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min:js"></script> <script src="https.//cdn.jsdelivr.net/npm/bootstrap@5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> <script src="index.js"charset="UTF-8"></script> </body> </html>

solution2
 0 ACCPTED  2022-08-19 08:29:24

it is probably due to d-none class which is an abreviation for display: none; . Change it to display: flex; for example. You may refer to the documentation of flexbox to get more info. Best.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Bootstrap navbar will disappear when clicking the toggle button on small devices Twitter Bootstrap responsive navbar title for small devices Responsive Navbar not working on Mobile Devices bootstrap navbar toogler not working on small screen Bootstrap small window navbar dropdown not working Sweetalert 2 JS is not working properly in small devices navbar-toggle button not working Overflow X Hidden not working on Mobile devices for my Navbar Toggle button collapse not working in Bootstrap navbar in bootstrap Angular : Navbar Toggle button not working in mobile view
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM