ziggelflex Posted March 28, 2022 Share Posted March 28, 2022 Hey, I'm new here and haven't gotten used to the way things are on this forum yet. I will try hard to get used to your ways. I have an issue with bootstrap. When I shrink the browser size down and the burger appears and then I tap/click on it nothing happens. I have been to bootstraps help and reference pages and i'm pretty sure I have done everything right. Anyway any help would be great. Here is my code. <!DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Test Nav</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> </head> <body> <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <a class="navbar-brand" href="#">Test Nav</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link" href="login_create.php">Create</a> <a class="nav-item nav-link" href="login_read.php">Read</a> <a class="nav-item nav-link" href="login_update.php">Update</a> <a class="nav-item nav-link" href="login_delete.php">Delete</a> </div> </div> </nav> </body> </html> Cheers Ziggy Quote Link to comment Share on other sites More sharing options...
gizmola Posted March 31, 2022 Share Posted March 31, 2022 You have a couple of issues -- one cosmetic, and one functional. The functional issue is that your data- keys are incorrect. You need data-bs-toggle and data-bs-target. You also don't have the nav inside a container which makes it wonky, although that is not why the hamburger doesn't work. Fixing both of those gives you this (just the body section). <nav class="navbar navbar-expand-lg navbar-dark bg-dark"> <div class="container-fluid"> <a class="navbar-brand" href="#">Test Nav</a> <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <div class="navbar-nav"> <a class="nav-item nav-link" href="login_create.php">Create</a> <a class="nav-item nav-link" href="login_read.php">Read</a> <a class="nav-item nav-link" href="login_update.php">Update</a> <a class="nav-item nav-link" href="login_delete.php">Delete</a> </div> </div> </div> </nav> Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.