Bootstrap 4 navbar toggler hamburger is button not working
Sebastian Wright
On mobile view, when I click the nabar-toggler button it opens the menu, but when I click it again it doesn't close the menu. I have no idea what the issue could be? I checked all the cdn links, the compiled css and everything else is working fine in the app except for this. Need help ya'll! Thanks.
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Brandon Matthews</title> <!-- Font Awesome --> <link rel="stylesheet" href=""> <!-- Bootstrap core CSS --> <link rel="stylesheet" href="" integrity="sha384-9gVQ4dYFwwWSjIDZnLEWnxCjeSWFphJiwGPXr1jddIhOegiu1FwO5qRGvFXOdJZ4" crossorigin="anonymous"> <!-- Material Design Bootstrap --> <link href="./public/assets/css/compiled1.min.css" rel="stylesheet"> <!--My CSS--> <link href="./public/assets/css/index.css">
</head>
<body> <!-- Main navigation --> <header> <!-- Navbar --> <nav> <div> <a href="#">Matthews Development</a> <button type="button" aria-controls="navbarTogglerDemo01" aria-expanded="false" aria-label="Toggle navigation"> <span></span> </button> <div> <ul> <li> <a href="#home">Home <span>(current)</span> </a> </li> <li> <a href="#about">About</a> </li> <li> <a href="#portfolio">Projects</a> </li> <li> <a href="#contact">Contact</a> </li> </ul> <!-- Social Icon --> <ul> <li> <a href=""> <i></i> </a> </li> <li> <a href=""> <i></i> </a> </li> <li> <a> <i></i> </a> </li> </ul> </div> </div> </nav> <!-- Navbar --> 2 1 Answer
I think you haven't imported all the necessary bootstrap js files mentioned here ().
I created a jdfiddle of your code () and added bootstrap 4 javascript files and it worked for me.
These are the scripts I have added
<script src="" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script> 1