'Offcanvas double toggling issue

I'm trying to make my offcanvas (which is only active on smaller screens) toggle with toggle button. However, when I press this I noticed that the offcanvas sometimes displays and then instantly rehides itself. Been trying to fix this for a while and can't figure out why. It also seems inconsistent; sometimes the offcanvas will open x times perfectly then it'll start to open and close instantly.

Also, is it considered bad practice to have the offcanvas outside of my nav element? I found it difficult to place the offcanvas inside of the nav element, utilising the same links as when the window width is large.

<!DOCTYPE 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>Food website</title>
    <link rel="stylesheet" href="./node_modules/bootstrap/dist/css/bootstrap.css" />
    <link rel="stylesheet" href="./css/styles.css" />
    <link rel="shortcut icon" href="#" />
    <script type="module" src="./src/main.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="./node_modules/@popperjs/core/lib/popper.js" />
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
    <!-- matrial icons -->
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Outlined"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Round"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Sharp"
    rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Material+Icons+Two+Tone"
    rel="stylesheet">
  </head>
  <body>
    <nav class="navbar navbar-expand-md navbar-light bg-light p-2 nav-bar d-flex top-nav">
      <div class="top-nav__logo">
        <p class="text-uppercase ml-3 mb-0 top-nav__logo-text ">Eltd</p>
      </div>
      <!-- <div class=""> -->
      <div class="collapse navbar-collapse d-flex justify-content-end align-items-center top-nav__links collapse d-none" >
        <ul class="navbar-nav mb-2">
          <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="#">Menu</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Find Us</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Contact</a>
          </li>
          <li class="nav-item">
          </li>
        </ul>
        <div class="nav-item d-grid gap-2 col-6 mx-auto">
          <button class="nav-link btn btn-primary pt-1 pb-1 text-white mr-3 nav-link" type="button" href="#" >Order Now</button>
        </div>
      </div><!-- topnav end -->
    </nav>
    <!-- offcanvas start -->
    <div>
      <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasRight" aria-controls="offcanvasRight">Toggle
        <i class="material-icons click-through">face</i>
      </button>
      <div class="offcanvas offcanvas-end" data-bs-backdrop="false" tabindex="-1" id="offcanvasRight" aria-labelledby="offcanvasRightLabel">
        <div class="offcanvas-header">
          <h5 id="offcanvasRightLabel">Offcanvas right</h5>
          <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
        </div>
        <div class="offcanvas-body bg-dark text-light">
          ...
          asdfasdf
        </div>
      </div>
    </div><!-- offcanvas end -->
  </main>

  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>

  </body>
</html>

Tried to have offcanvas display when "toggle" button is pressed, resulting in re-hiding element instead of remaining displayed until further input.

html


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions