Navbar menu dropdown not working (won't drop down when clicked)
Bro you have just missed a # in data-target attribute this is how it works.
change this line
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar">
by this
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
check the working demo here!
Bootstrap Dropdown menu is not working
Maybe try with
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
and see if it will work.
Dropdown Menu Won't Drop Down
Found this on another stackoverflow post (I had searched here prior to posting the question, but must have used other search terms. I found this on Google.)
I needed to include these script srcs under my link rels and in this order:
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
The link to the original solution is here:
Bootstrap 4 Dropdown Menu not working?
Hope that can help others! I had no idea there was a particular order.
Navbar drop-down menu not working with Angular and Bootstrap 4
You have to make sure that popper.js is included and loaded in your Angular app because that is required for all things that pop up or drop down in Bootstrap 4.
Here's what the relevant part of your angular-cli.json should look like:
"styles": [
"../node_modules/bootstrap/dist/css/bootstrap.min.css",
"styles.css"
],
"scripts": [
"../node_modules/jquery/dist/jquery.min.js",
"../node_modules/popper.js/dist/umd/popper.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"
],
To install popper.js use this command:
npm install popper.js --save
Reference: https://www.npmjs.com/package/popper.js
Bootstrap dropdown not working
Working demo: http://codebins.com/bin/4ldqp73
try this
<ul class='nav'>
<li class='active'>Home</li>
<li>
<div class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" href="#">Personal asset loans</a>
<ul class="dropdown-menu" role="menu" aria-labelledby="dLabel">
<li><a href="#">asds</a></li>
<li class="divider"></li>
</ul>
</div>
</li>
<li>Payday loans</li>
<li>About</li>
<li>Contact</li>
</ul>
Not able to click on drop down menu on Nav bar
Here is the fiddle: https://jsfiddle.net/besr6sju/
<div class="row" id="top-banner">
<div class="col-xs-12 col-sm-11">
<nav class="navbar navbar-inverse bg-inverse">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" >Movie Flix</a>
<input type="search" class="search-box" placeholder="Search" >
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Select Type <b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="#">Movies</a></li>
<li><a href="#">Series</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">Genre <b class="caret"></b></a>
<ul class="dropdown-menu multi-column columns-3">
<div class="row">
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Action</a></li>
<li><a href="#">Adventure</a></li>
<li><a href="#">Sci-Fi</a></li>
<li><a href="#">Thriller</a></li>
<li><a href="#">Crime</a></li>
<li><a href="#">News</a></li>
<li><a href="#">Talkshow</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Drama</a></li>
<li><a href="#">Fantasy</a></li>
<li><a href="#">Comedy</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Biography</a></li>
<li><a href="#">Documentary</a></li>
<li><a href="#">War</a></li>
</ul>
</div>
<div class="col-sm-4">
<ul class="multi-column-dropdown">
<li><a href="#">Mystery</a></li>
<li><a href="#">Romance</a></li>
<li><a href="#">Western</a></li>
<li><a href="#">Animation</a></li>
<li><a href="#">Horror</a></li>
<li><a href="#">Family</a></li>
</ul>
</div>
</div>
</ul>
</li>
</ul>
</div>
<!--/.navbar-collapse-->
</nav>
</div>
</div>
Your dropdown is working fine. Can you please specify the exact issue?
Bootstrap 4 Dropdown Menu not working?
Edit: In case anyone else is having this problem, I believe the solution for OP was that he had not imported popper.js.
Check that jQuery and all the relevant Bootstrap components are there. Also check the console and make sure there are no errors.
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css" integrity="sha384-/Y6pD6FV/Vv2HJnA6t+vslU6fwYXjCFtcEpHbNJ0lyAFsXTsjBbfaDjzALeQsN6M" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Pricing</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="http://example.com" id="navbarDropdownMenuLink" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown link
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</li>
</ul>
</div>
</nav>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script>
<-- Always remember to call the above files first before calling the bootstrap.min.js file -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js" integrity="sha384-h0AbiXch4ZDo7tp9hKZ4TsHbi047NrKGLO3SEJAg45jXxnGIfYzk4Si90RDIqNm1" crossorigin="anonymous"></script>
</body>
</html>My bootstrap dropdown menu is not working in navigation bar
Its working fine, You need to add jquery, Bootstrap ja, Bootstrap CSS` then if will work
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> <!-- navbar--> <nav class="navbar navbar-default"> <div class="container-fluid"> <a href="#" class="navbar-header navbar-brand">MYSITE</a> <ul class="nav navbar-nav">
<li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tags <span class="caret"></span></a>
<ul class="dropdown-menu"> <li><a href="#">menu1</a></li> <li><a href="#">menu2</a></li> <li><a href="#">menu3</a></li> <li><a href="#">menu4</a></li> <li><a href="#">menu5</a></li> <li><a href="#">menu6</a></li> <li><a href="#">menu7</a></li> <li><a href="#">menu8</a></li> <li><a href="#">menu9</a></li> <li><a href="#">menu10</a></li> <li><a href="#">menu11</a></li> <li><a href="#">menu12</a></li> <li><a href="#">menu13</a></li> <li><a href="#">menu14</a></li> <li><a href="#">menu15</a></li> <li><a href="#">menu16</a></li> <li><a href="#">menu17</a></li> <li><a href="#">menu18</a></li> <li><a href="#">menu19</a></li> </ul>
</li>
</ul> </div>
</nav>Related Topics
How to Center a "Position: Absolute" Element
When Flexbox Items Wrap in Column Mode, Container Does Not Grow Its Width
Vertical-Align With Bootstrap 3
How to Have an Onclick Effect in Css
One Flex/Grid Item Sets the Size Limit For Siblings
Flex/Grid Layouts Not Working on Button or Fieldset Elements
How to Align 3 Divs (Left/Center/Right) Inside Another Div
Styling an Input Type="File" Button
How to Display Raw HTML Code on an HTML Page
Does Ul Have Default Margin or Padding
How to Disable Equal Height Columns in Flexbox
Proper Use of Flex Properties When Nesting Flex Containers
Html Table With 100% Width, With Vertical Scroll Inside Tbody
Two Divs Side by Side - Fluid Display