Question posted in 
I am trialling bootstrap 5 by modifying an existing html which includes a menu added by jquery. When I use the bootstrap 3 cdn the menu is displayed, when I use the bootstrap 5 cdn the menu is not displayed.
Is this a bug with bootstrap 5 or am I doing something wrong in my code?
The jquery is:
$(document).ready(function(){
//Include the menu before the document is ready.
$("#includedContent").load("Menu.html", function() {
//Do not allow these items to be selected when a youth member is not displayed
$(document).on("click", ".dropdown-menu li.disabled a", function() {
return false;
});
});
});
The html is:
<div id="accountUpdate" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<div id="includedContent"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-warning">
Bootstrap 3 cdn:
Bootstrap 5 cdn:
This is the code (cut down):
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Edit Awards</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="application-name" content="Award Tracking Application" />
<meta name="author" content="Glyndwr (Wirrin) Bartlett" />
<meta name="description" content="A Scout award tracking application" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<!-- Validate -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/additional-methods.min.js"></script>
<!-- Bootstrap -->
<!-- <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/js/bootstrap.min.js"></script>
<!-- Bootstrap Date Picker-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.20.1/moment.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
<!-- Text Editor -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.js"></script><!-- 0.8.9 -->
<!-- Le styles -->
<!-- Bootstrap -->
<!-- <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker.css" />
<!-- Confirm -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jquery-confirm/3.3.0/jquery-confirm.min.css">
<!-- Text Editor -->
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote-bs4.css" rel="stylesheet">
<style type="text/css">
body {
padding-top: 40px;
padding-bottom: 40px;
background-color: #f5f5f5;
}
.form-select {
max-width: 100%;
padding: 19px 29px 29px;
background-color: #fff;
border: 1px solid #e5e5e5;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.05);
box-shadow: 0 1px 2px rgba(0,0,0,.05);
}
.form-signin .form-heading,
.form-signin .checkbox {
margin-bottom: 10px;
}
.form-signin input[type="text"],
.form-signin input[type="password"] {
font-size: 16px;
height: auto;
margin-bottom: 15px;
padding: 7px 9px;
}
.myheader {
display:flex;
text-align: center;
}
.myimg {
width: 130px;
height: auto;
}
.pull-right {
text-align: right;
}
/* Tooltip container */
/* Tooltip text */
.tooltiptext {
visibility: hidden;
width: 120px;
background-color: #555;
color: #fff;
text-align: center;
padding: 5px 0;
border-radius: 6px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 1s;
}
/* Tooltip arrow */
.tooltiptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltiptext {
visibility: visible;
opacity: 1;
}
/* Change the padding */
.padding-1{
padding-right:1;
padding-left:1;
}
.req {
color: red;
}
.input100, textarea {
width: 100% !important
}
.row-eq-height {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
flex-wrap: wrap;
}
.datepicker {
z-index: 999 !important;
}
.big-checkbox {
width: 1.5rem;
height: 1.5rem;
top: 0.5rem;
}
</style>
<link href="resources/bootstrap-3.3.7-dist/css/bootstrap-responsive.css" rel="stylesheet">
<!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="resources/js/html5shiv.js"></script>
<![endif]-->
<!-- Fav and touch icons -->
<link rel="shortcut icon" href="resources/favicon.png">
</head>
<body>
<div id="accountUpdate" class="container-fluid" style="background-repeat: repeat; background-image: url('images/body-bg.jpg');">
<br><br><br><br>
<div id="includedContent"></div>
<div class="col-lg-12 col-md-12 col-sm-12 col-xs-12 bg-warning">
<h3>Edit Awards</h3>
</div>
</div> <!-- /container -->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-tooltip.js"></script>
<script src="resources/bootstrap-3.3.7-dist/js/bootstrap-popover.js"></script>
<script src="js/awardsEdit8.js"></script>
</body>
</html>
js:
$(document).ready(function(){
//document.addEventListener("DOMContentLoaded", function(event){
//Include the menu before the document is ready.
$("#includedContent").load("Menu.html", function() {
//Do not allow these items to be selected when a youth member is not displayed
$(document).on("click", ".dropdown-menu li.disabled a", function() {
return false;
});
});
});
This is the cut down menu:
<head>
<title>Menu</title>
<meta name="robots" content="noindex, nofollow" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv=Content-Type content="text/html; charset=utf-8" />
<meta name="application-name" content="Award Tracking Application" />
<meta name="author" content="Glyndwr (Wirrin) Bartlett" />
<meta name="description" content="A Scout award tracking application" />
<title>Bootstrap 3 Dropdowns within a Navbar for Award Tracking Application</title>
<style type="text/css">
.bs-example{
margin: 5px;
}
.ypr_btn{background-color:#ffbf00; color:white; padding: 8px 16px;}
li.dropdown-header {
color: #ff0000;
}
li#logOutAdmin, li#logOutGL, li#logOutGT, li#logOutQM, li#logOutJ, li#logOutC,
li#logOutS, li#logOutV, li#logOutR, li#logOutNL, li#logOutYM, li#logOutDis,
li#logOutDS, li#logOutReg, li#logOutSta, li#logOutSS {
background-color:red;
}
li.selectRole {
background-color:green;
}
/* News Ticker */
.onoffswitch3
{
position: relative;
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select: none;
}
.onoffswitch3-checkbox {
display: none;
}
.onoffswitch3-label {
display: block;
overflow: hidden;
cursor: pointer;
border: 0px solid #999999;
border-radius: 0px;
}
.onoffswitch3-inner {
display: block;
width: 200%; margin-left: -100%;
-moz-transition: margin 0.3s ease-in 0s;
-webkit-transition: margin 0.3s ease-in 0s;
-o-transition: margin 0.3s ease-in 0s;
transition: margin 0.3s ease-in 0s;
}
.onoffswitch3-inner > span {
display: block;
float: left;
position: relative;
width: 50%;
height: 30px;
padding: 0;
line-height: 30px;
font-size: 14px;
color: white;
font-family: 'Montserrat', sans-serif;
font-weight: bold;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
.onoffswitch3-inner .onoffswitch3-active {
padding-left: 10px;
background-color: #EEEEEE;
color: #FFFFFF;
}
.onoffswitch3-inner .onoffswitch3-inactive {
width: 140px;
padding-left: 16px;
background-color: #000000;
color: #FFFFFF;
text-align: right;
white-space: nowrap;
}
.onoffswitch3-switch {
display: block;
width: 50%;
margin: 0px;
text-align: center;
border: 0px solid #999999;
border-radius: 0px;
position: absolute;
top: 0;
bottom: 0;
}
.onoffswitch3-active .onoffswitch3-switch {
background: #27A1CA;
left: 0;
width: 160px;
}
.onoffswitch3-inactive{
background: #A1A1A1;
right: 0;
width: 20px;
}
.onoffswitch3-checkbox:checked + .onoffswitch3-label .onoffswitch3-inner {
margin-left: 0;
}
.glyphicon-remove{
padding: 3px 0px 0px 0px;
color: #fff;
background-color: #000;
height: 25px;
width: 25px;
border-radius: 15px;
border: 2px solid #fff;
}
.scroll-text{
color: #000;
}
</style>
<script type="text/javascript">
//YPR
if(sessionStorage.getItem('ssGroupNAS') === 'Y' ){
$('.ypr_btn').text('NYP');
}else{
$('.ypr_btn').text('PAS');
}
$('.ypr_btn').click(function(){
if($(this).text().trim() === 'NYP' ){
$('.ypr_btn').text('PAS');
sessionStorage.setItem('ssGroupNAS', "N");
if(sessionStorage.getItem('ssAccountLevelX') === "Youth Member"){
window.location = "AwardOverview.html";
}else{
window.location = "SelectPerson.html";
}
}else{
$('.ypr_btn').text('NYP');
sessionStorage.setItem('ssGroupNAS', "Y");
if(sessionStorage.getItem('ssAccountLevelX') === "Youth Member"){
window.location = "AwardOverviewYPR.html";
}else{
window.location = "SelectPerson.html";
}
}
});
//Hide Select Role if user is not multi-role
if (sessionStorage.getItem('ssMultiRole') !== "Y") {
$('li.selectRole').hide();
}
</script>
</head>
<body>
<script>
$("#myNavbarAdministrator").hide();
$("#myNavbarDistrict").hide();
$("#myNavbarDistrictSection").hide();
$("#myNavbarGroupLeader").hide();
$("#myNavbarGroupTreasurer").hide();
$("#myNavbarLeaderJoey").hide();
$("#myNavbarLeaderCub").hide();
$("#myNavbarLeaderScout").hide();
$("#myNavbarLeaderVenturer").hide();
$("#myNavbarLeaderRover").hide();
$("#myNavbarNonLeader").hide();
$("#myNavbarQuartermaster").hide();
$("#myNavbarRegion").hide();
$("#myNavbarRegionSection").hide();
$("#myNavbarState").hide();
$("#myNavbarStateSection").hide();
$("#myNavbarYouthMember").hide();
switch (true) {
case (sessionStorage.getItem('ssAccountLevelX') === "Administrator") : $("#myNavbarAdministrator").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "District") : $("#myNavbarDistrict").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "District-Section") : $("#myNavbarDistrictSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Group-Leader") : $("#myNavbarGroupLeader").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Group-Treasurer") : $("#myNavbarGroupTreasurer").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Quartermaster") : $("#myNavbarQuartermaster").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Joey") : $("#myNavbarLeaderJoey").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Cub") : $("#myNavbarLeaderCub").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Scout") : $("#myNavbarLeaderScout").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Venturer") : $("#myNavbarLeaderVenturer").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Leader"
&& sessionStorage.getItem('ssGroupSection') === "Rover") : $("#myNavbarLeaderRover").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Non-leader") : $("#myNavbarNonLeader").show(); $("#newsDiv").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Region") : $("#myNavbarRegion").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Region-Section") : $("#myNavbarRegionSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "State") : $("#myNavbarState").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "State-Section") : $("#myNavbarStateSection").show(); break;
case (sessionStorage.getItem('ssAccountLevelX') === "Youth Member") : $("#myNavbarYouthMember").show(); $("#newsDiv").show(); break;
}
</script>
<div class="global-menu">
<!-- Administrator's menu -->
<nav id="myNavbarAdministrator" class="navbar navbar-default" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#administratorNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="administratorNavbar">
<ul class="nav navbar-nav">
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">EAP<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="EAP.html">Event Approval Package</a></li>
<li><a href="EAPAdministration.html">EAP Administration</a></li>
</ul>
</li>
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Administration<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="AccountAdmin.html">Accounts Admin</a></li>
<li><a href="AccountDetails.html">Account Details</a></li>
<li><a href="AccountEmailAdmin.html">Account Email</a></li>
<li><a href="AccountLeader.html">Account Leader Association</a></li>
<li><a href="AccountActivation.html">Account Status Update</a></li>
<li><a href="AccountTransfer.html">Account Transfer</a></li>
<!-- <li><a href="AccountSection.html">Assign Unit to Account</a></li> -->
<li><a href="AwardsEdit.html">Award Administration</a></li>
<li><a href="CaptchaAdministration.html">Captcha Administration</a></li>
<li><a href="GroupAdmin.html">Group Administration</a></li>
<li><a href="IssueRequestAdmin.html">Issue Administration</a></li>
<li><a href="LeaderAdminAdministrator.html">Leader Administration</a></li>
<li><a href="LinksAdmin.html">Links</a></li>
<li><a href="MealMenus.html">Meal Menus</a></li>
<li><a href="NewsAdmin.html">News</a></li>
<li><a href="PatrolAdmin.html">Patrol Administration</a></li>
<li><a href="PasswordReset.html">Reset Password</a></li>
<li><a href="ResourceAdmin.html">Resources</a></li>
<li><a href="CatSandwichAdmin.html">Sandwich Administration</a></li>
<li><a href="ScoutTransfer.html">Scout Transfer</a></li>
<li><a href="SectionAwardOrder.html">Unit Award Order</a></li>
<li><a href="SectionAwardType.html">Unit Award Type</a></li>
<li><a href="YouthMemberAdmin.html">Youth Member Administration</a></li>
</ul>
</li>
<li class="dropdown">
<a href="PP.html">Program Planner</a>
</li>
<!--
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Messages<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="OASSupportReq.html">OAS Support Request</a></li>
<li><a href="#">My Messages</a></li>
<li><a href="#">Send Account Emails</a></li>
</ul>
</li>
-->
<li class="dropdown">
<a href="#" data-toggle="dropdown" class="dropdown-toggle">Reports<b class="caret"></b></a>
<ul class="dropdown-menu">
<li><a href="AwardUsage.html">Award Usage</a></li>
<li><a href="EmailAddresses.html">Email Addresses</a></li>
<li><a href="GroupsAdminReport.html">Groups</a></li>
<li><a href="Statistics.html">Statistics</a></li>
<li><a href="ProgressChart.html">Progress Chart</a></li>
<li><a href="UsageReport.html">Usage</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li id="logOutAdmin"><a href="Login.html"><font color="ffffff"><b>Log out</b></font></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div>
</nav>
</div>
</body>
2
Answers
Check the DOM. Is the menu code there? if yes so you most change menu css position styles and or z-index in inspect to fixed it.
As Bootstrap 5 (BS5) has changed quite a bit from Bootstrap 3 (BS3), you’re going to need to recreate your pages using BS5 classes.
The menu code that you added to your question is for BS3. I used that code as the basis for creating the same concept using BS5. It is a little different. For example, BS3 uses a 14px font-size while BS5 uses a 16px font-size. You could override all of those types of changes, but with the current screen resolutions that are available, a using BS5’s standards may be better for your users.
Menu recreated in BS5
I did change the line-height and the vertical padding on the menu items so they fit better on a page.
Using the @ and username did help in replying to previous comments — doing so delivers a message to my inbox.