Why the navbar dropdown in bootstrap 5 doesn't work
Change this:
<a class="nav-link dropdown-toggle" href="#" id="navbardrop" data-toggle="dropdown"> Dropdown link </a>
To this:
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>
Also add this:
<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>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>
<nav class="navbar navbar-expand-sm bg-dark navbar-dark">
<!-- Brand -->
<a class="navbar-brand" href="#">Logo</a>
<!-- Links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#">Link 1</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link 2</a>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">Dropdown Link</a>
<div class="dropdown-menu">
<a class="dropdown-item" href="#">Link 1</a>
<a class="dropdown-item" href="#">Link 2</a>
<a class="dropdown-item" href="#">Link 3</a>
</div>
</li>
</ul>
</nav>
<br>
<div class="container">
<h3>Navbar With Dropdown</h3>
<p>This example adds a dropdown menu in the navbar.</p>
</div>
<h1>Navbar</h1>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Link</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Dropdown
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<hr class="dropdown-divider">
</li>
<li><a class="dropdown-item" href="#">Something else here</a></li>
</ul>
</ul>
</div>
</div>
</nav>
<!-- JavaScript Bundle with Popper -->
<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>
Why dropdown dont work in bootstrap5 navbar?
It's not working to toggle the dropdown because the anchor tag is attempting to navigate. Remove the url from the href...
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle"
data-bs-toggle="dropdown"
role="button" aria-expanded="false">LoginPage</a>
<ul class="dropdown-menu">
<li class="nav-item ">
<a href="http://localhost:8080/LoginPage/Bootstrap-34" class="dropdown-item">Bootstrap</a>
</li>
</ul>
</li>
Note to future readers: Most Bootstrap 5 "dropdown not working" questions are caused by failing to use the new data-bs-
attributes
Bootstrap navbar content not showing when collapsed
Here you go...
Change:
data-toggle="collapse"
(Bootstrap 4) todata-bs-toggle="collapse"
(Bootstrap 5)data-target="#navbarNav"
(Bootstrap 4) todata-bs-target="#navbarNav"
(Bootstrap 5)
#navbarLogo {
width: 10rem;
height: auto;
}
.navbar-brand img {
height: 50px;
width: auto;
padding-left: 30px;
}
#linkText {
font-family: hdFontMedium;
font-size: 1.5rem;
font-weight: bold;
text-align: center;
}
#navbarNav {
justify-content: flex-end;
align-items: center;
}
#navbarListItem {
padding-left: 10px;
padding-right: 10px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Bootstrap css-->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href=/static/main.css>
<link rel="stylesheet" href=/static/style.css>
<link rel="shortcut icon" type="image/png" href="/static/media/favicon.png" />
<title>Dimsum Siblings</title>
<!--font-awesome including icon for shopping cart-->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg navbar-light bg-secondary" id="navbar">
<a class="navbar-brand navbar-left" href="/" id="navbarLogoLink">
<img src="static/media/logoWithText.png" alt="" id="navbarLogo">
</a>
<button class="navbar-toggler m-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="#navbarNav" 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" id="navbarListItem">
<a class="nav-link px-6" id="mainNavlink" href="">
<h3 id="linkText">ABOUT US</h3>
</a>
</li>
<li class="nav-item active" id="navbarListItem">
<a class="nav-link px-6" id="mainNavlink" href="/dimsumshop">
<h3 id="linkText">ORDER DIMSUM BOX</h3>
</a>
</li>
<li class="nav-item active" id="navbarListItem">
<a class="nav-link px-6" id="mainNavlink" href="">
<h3 id="linkText">INSTRUCTIONS</h3>
</a>
</li>
<li class="nav-item active" id="navbarListItem">
<a class="nav-link px-6" id="mainNavlink" href="">
<h3 id="linkText">CONTACT</h3>
</a>
</li>
</ul>
</div>
</nav>
<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>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
</body>
</html>
Bootstrap 5 Nav-bar collapse does not work
You have to change the data-toggle to data-bs-toggle and use data-bs-target attribute. Add the ID in the collapse div. That's all.
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#collapse" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-collapse collapse" id="collapse">
Bootstrap v5 dropdown is not working (no drop down menu)
You need to apply 2 changes:
data-toggle
has been renamed to data-bs-toggle
.
Second, add the dependency to popper.js:
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
Or use the bootstrap version that has popper compiled in according to https://getbootstrap.com/docs/5.0/getting-started/download/
bootstrap collapse navbar not working. whenever i press the icon in a smaller screen the menu does not open, how do i fix?
Assuming you are using Bootstrap 5, Some attributes are changed compared to bootstrap 4.
Change your code like this
<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
<div class="container-fluid">
<a href="./index.html" class="navbar-brand"><img src="./images/StoreLogo.png" alt="Home" width="70px" height="auto"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" 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">
<a class="nav-link active" href="./index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="./AboutUs.html">About Us</a>
</li>
</ul>
</div>
</div>
</nav>
Click here for more Info Documentation
Related Topics
Pass JavaScript Variable to PHP Via Ajax
Unescape HTML Entities in JavaScript
How to Read CSS Rule Values With JavaScript
How to Show the "Are You Sure You Want to Navigate Away from This Page" When Changes Committed
How to Append Text to a '≪Div≫'
How to Correctly Iterate Through Getelementsbyclassname
How to Get a File or Blob from an Object Url
Best Practice: Access Form Elements by HTML Id or Name Attribute
How to Make a Browser to Browser (Peer to Peer) Connection
How to Draw an Inline Svg (In Dom) to a Canvas
Why Isn't My JavaScript Working in Jsfiddle
How to Know Which Radio Button Is Selected Via Jquery
Creating a Div Element in Jquery
How to Load an HTML Page in a Div Using JavaScript
Page Content Is Loaded With JavaScript and Jsoup Doesn't See It