Question 37081 in Jquery Question posted in
The official Jquery Api Documentation can be found here.

Navbar button not working on small devices – Jquery

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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>


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

  </body>
  </html>
Tags:

2

Answers


  1. 0

    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/[email protected]/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/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
  
  
    <script src="index.js"charset="UTF-8"></script>
  
    </body>
    </html>
    Login or Signup to reply.
  2. 0

    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.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search