bootstrap 4 navbar collapse doesn't work (with JQuery - popper - bootstrap
Question
Good day.
Learning web-development and trying to make a button to collapse the navbar. Checked answers in previous similar questions but didn't find the answer that helps me.
I've to give IDs for data-target, have a correct order in the scripts (JQuery - Popper - Bootstrap), made it as in the example from my learning video lessons. Save it - click on the toggler-icon button but nothing happened.
Here my code. Where am I wrong?
<!DOCTYPE html> <html lang="en"> <head> <!-- Required meta tags always come first --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <!-- Bootstrap CSS --> <link rel="stylesheet" href="node_modules/bootstrap/dist/css/bootstrap.min.css"> <link rel="stylesheet" href="css/styles.css"> <title>Ristorante Con Fusion</title> </head> <body> <nav class="navbar navbar-dark navbar-expand-sm bg-primary fixed-top"> <div class="container"> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#Navbar"> <span class="navbar-toggler-icon"></span> </button> <a class="navbar-brand mr-auto" href="#">Ristorante Con Fusion</a> <div class="collapse navbar-collapse" id="#Navbar"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"><a class="nav-link" href="#">Home</a></li> <li class="nav-item"><a class="nav-link" href="./aboutus.html">About</a></li> <li class="nav-item"><a class="nav-link" href="#">Menu</a></li> <li class="nav-item"><a class="nav-link" href="#">Contact</a></li> </ul> </div> </div> </nav> <header class="jumbotron"> <div class="container"> <div class="row-header"> <div class="col-12 col-sm-6"> <h1>Ristorante con Fusion</h1> <p>We take inspiration from the World's best cuisines, and create a unique fusion experience. Our lipsmacking creations will tickle your culinary senses!</p> </div> <div class="col-12 col-sm"> </div> </div> </div> </header> <div class="container"> <div class="row row-content align-items-center"> <div class="col-12 col-sm-4 order-sm-last col-md-3"> <h3>Our Lipsmacking Culinary Creations</h3> </div> <div class="col col-sm order-sm-first col-md"> <h2>Uthappizza</h2> <p>A unique combination of Indian Uthappam (pancake) and Italian pizza, topped with Cerignola olives, ripe vine cherry tomatoes, Vidalia onion, Guntur chillies and Buffalo Paneer.</p> </div> </div> <div class="row row-content align-items-center"> <div class="col-12 col-sm-4 col-md-3"> <h3>This Month's Promotions</h3> </div> <div class="col col-sm col-md"> <h2>Weekend Grand Buffet</h2> <p>Featuring mouthwatering combinations with a choice of five different salads, six enticing appetizers, six main entrees and five choicest desserts. Free flowing bubbly and soft drinks. All for just $19.99 per person </p> </div> </div> <div class="row row-content align-items-center"> <div class="col-12 col-sm-4 order-sm-last col-md-3"> <h3>Meet our Culinary Specialists</h3> </div> <div class="col col-sm order-sm-first col-md"> <h2>Alberto Somayya</h2> <h4>Executive Chef</h4> <p>Award winning three-star Michelin chef with wide International experience having worked closely with whos-who in the culinary world, he specializes in creating mouthwatering Indo-Italian fusion experiences. </p> </div> </div> </div> <!-- jQuery first, then Popper.js, then Bootstrap JS. --> <script src="node_modules/jquery/dist/jquery.slim.min.js"></script> <script src="node_modules/popper.js/dist/umd/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
1 answers
solution1
1 ACCPTED 2020-10-12 10:36:53
请删除'#'
<div class="collapse navbar-collapse" id="#Navbar">
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.
Related Question
Bootstrap 3.3.7 navbar collapse doesn't work
Bootstrap navbar collapse doesn't work
Bootstrap 5 navbar button collapse doesn't work
Bootstrap 4 navbar doesn't collapse
navbar (Collapse) button doesn't work Bootstrap 5.1.3
Bootstrap - Navbar collapse will not work
Navbar doesn't collapse properly in bootstrap 3
bootstrap navbar collapse won't work
jQuery smooth scroll doesn't work with Bootstrap 4 Navbar
Bootstrap navbar won't collapse
Related Tags