汉堡菜单未在引导程序上打开

Question

I'm unable to open the hamburger menu while using bootstrap. Would somebody please tell me what the issue is with the code?

I've pulled the code directly from the bootstrap website. I've looked at others' questions regarding this problem, but the suggested solutions haven't helped.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <a class="navbar-brand" href="index.html"> <img src="logo.png" width="200" height="200" class="d-inline-block align-top" alt=""> </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="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <a href="#" class="fa fa-instagram"></a> </div> </nav>

Please explain this for me very simply, as I'm new to coding. I want to be able to open the hamburger menu on a mobile device.

Answer 1

• data-target and the id were not the same.
• You need the jquery and bootstrap.js for the dropdown to work.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <a class="navbar-brand" href="index.html"> <img src="logo.png" width="50" height="50" class="d-inline-block align-top" alt=""> </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"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <a href="#" class="fa fa-instagram"></a> </div> </nav> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>

Answer 2

for people looking for a solution in bootstrap 5, you should replace data-target with data-bs-target .

<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#forum_navbar"
            aria-controls="forum_navbar" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

Answer 3

Thank you all so much! This really helped.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous"> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script> <nav class="navbar fixed-top navbar-expand-lg navbar-light" style="background-color: #ffffff;"> <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="navbarNav"> <ul class="navbar-nav"> <li class="nav-item active"> <a class="nav-link" href="index.html">Home <span class="sr-only"> (current)</span></a> </li> <li class="nav-item"> <a class="nav-link" href="portfolio.html">Portfolio </a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">About </a> </li> <li class="nav-item"> <a class="nav-link" href="contact.html">Contact </a> </li> </ul> </div> <div class="collapse navbar-collapse" id="navbarNavAltMarkup"> <a href="#"></a> <h1>HEY HEY HEY!<br/><i class="fas fa-yin-yang fa-spin"></i></h1> </div> </nav>

Answer 4

Sometimes people only import Bootstrap CSS CDN link. They need to be import JavaScript SDN link also for the Hamburger menu etc.

Answer 5

Something to note is the # in data-bs-target which references the id. I didn't notice this small element in the beginning and the hamburger menu wasn't working when clicked.