We Keep Coding

Is there a way to make a notification button that has a dropdown with a dot and make dot disappear on click using bootstrap 5 and js?

I'm looking for a button that has a dropdown with a notification badge and on click the badge/dot has to disappear.!
And the button is in navbar!
Here is something I tried but couldn't get the exact position I wanted.
<!-- Notification Nav -->
<ul class="nav navbar-nav ms-auto me-lg-3">
<li class="nav-item dropdown">
<a href="#" class="nav-link dropdown-toggle" data-bs-toggle="dropdown" onclick="myFunc()">
<span>
<img src="images/notification.svg" alt="Notification Icon">
<!-- Notification Dot -->
<span class="badge position-relative translate-middle text-dark top-0 border bg-success border-light p-1 noti-appear" style="border-radius: 30rem;" id="noti-id"><span class="visually-hidden"></span></span>
</span>
</a>
<!-- Notification DropDown List -->
<div class="dropdown-menu noti-dropDown">
<a href="#" class="dropdown-item d-flex justify-content-around align-items-center" aria-colspan="d-inline">
<span><img src="images/profile-pic-02.jpg" alt="Profile Pic" style="width: 30px; height: 30px; border-radius: 50px;"></span>
<span>Kevin Thomas
<small class="d-block text-muted">Assigned you on the call</small></span>
<small class="d-inline text-muted">2 min ago</small>
</a>
<a href="#" class="dropdown-item d-flex justify-content-around align-items-center" aria-colspan="d-inline">
<span><img src="images/profile-pic-06.jpg" alt="Profile Pic" style="width: 30px; height: 30px; border-radius: 50px;"></span>
<span>Alexa Mary
<small class="d-block text-muted ">Marked the task <b class="text-success">new UI</b> as done</small></span>
<small class="d-inline text-muted">2 min ago</small>
</a>
<a href="#" class="dropdown-item d-flex justify-content-around align-items-center" aria-colspan="d-inline">
<span><img src="images/profile-pic-05.jpg" alt="Profile Pic of Eva" style="width: 30px; height: 30px; border-radius: 50px;"></span>
<span>Eva Maria
<small class="d-block text-muted">Added a new comment.</small></span>
<small class="d-inline text-muted">2 min ago</small>
</a>
<div class="dropdown-divider"></div>
Show More
</div>
</li>
</ul>

Collapsed navbar push elements outside of parent container when shown (Bootstrap 5)

Intro
I'm using Bootstrap 5 (bundled with webpack 5), with his grid system and the collapse function to create the home page to this site, that has 2 sidebars that collapse into a topbar.
When we get to a mobile format the navs collapse and the columns containing them stack up leaving the 3rd col with the logo at the bottom without overflowing the parent.
Look at my 100% accurate ms paint graphics to understand better
Issue
When we show the collapsed navs, the columns containing them push the 3rd col with the logo out of the row and the container-fluid containing it.
Question
How can i make the navs expanding without pushing the logo? (to clarify the logo needs to stay below the navs
ms paint 100% accurate graphics
<div class="container-fluid">
<div class="row">
<div class="col-lg-1 order-0 my-auto">
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand brand d-lg-none" href="#"
><b>ENV</b>Productions</a
>
<button
class="navbar-toggler"
type="button"
data-bs-toggle="collapse"
data-bs-target="#navbarResponsive"
aria-controls="navbarResponsive"
aria-expanded="false"
aria-label="Toggle navigation"
>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul
class="navbar-nav flex-column justify-content-between text-center text-lg-start"
>
<li class="nav-item">
<a class="nav-link" href="#about">ABOUT</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#services">SEVICES</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#portfolio">PORTFOLIO</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT</a>
</li>
</ul>
</div>
</nav>
</div>
<div class="col-lg-10 order-lg-1 order-last my-auto text-center">
<a class="navbar-brand brand d-none d-lg-block" href="#"
><b>ENV</b>Productions</a
>
<img
src="assets/img/BG_ENV_MONO-800px.png"
alt=""
class="img-fluid"
/>
</div>
<div class="col-lg-1 order-lg-2 my-auto">
<nav class="navbar navbar-expand-lg">
<div
class="collapse navbar-collapse justify-content-end"
id="navbarResponsive"
>
<ul
class="navbar-nav flex-row flex-lg-column justify-content-around justify-content-lg-between"
>
<li class="nav-item text-center">
<a
href="https://www.instagram.com/env.productions/?hl=it"
target="”_blank”"
><i class="fa fa-instagram fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.youtube.com/channel/UCIloBELeZR4x8jmrhIQXQCw/featured"
target="”_blank”"
><i class="fa fa-youtube-play fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.facebook.com/env.productions/"
target="”_blank”"
><i class="fa fa-facebook-f fa-2x" aria-hidden="true"></i
></a>
</li>
<li class="nav-item text-center">
<a
href="https://www.linkedin.com/company/env-productions/"
target="”_blank”"
><i class="fa fa-linkedin fa-2x" aria-hidden="true"></i
></a>
</li>
</ul>
</div>
</nav>
</div>
</div>
</div>

I solved this by making the logo a background-image and merging the collapsible elements under the same parent with js.
There's probably a better solution though and maybe one that let you have the image at a block/inline level.

dropdown menu always active when not selected

This my html file. I dont know why in the menu dropdown-menu is always active even when not selected!
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-grid.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/css/bootstrap-reboot.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/theme/css/style.css">
<link rel="preload" as="style" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/mobirise/css/mbr-additional.css" type="text/css">
<link rel="stylesheet" href="http://arisk-icelab.polito.it/engine/static/assets/print.css">
<style>
.home {
padding: 5rem 0 10rem 0;
background: url('http://arisk-icelab.polito.it/engine/static/assets/images/Slide_ARISK.JPG') no-repeat;
background-size: 100% 100%;
margin-top: 3rem;
}
.dropdown-submenu {
position: relative;
}
.dropdown-submenu a:after {
transform: rotate(-90deg);
position: absolute;
right: 6px;
top: .8em;
}
.dropdown-submenu .dropdown-menu {
top: 0;
left: 100%;
margin-left: .1rem;
margin-right: .1rem;
}
</style>
</head>
<body data-spy="scroll" data-target="#navbarResponsive">
<div id="home">
<!--- Navigation --->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav mr-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" data-toggle="dropdown" role="menu" aria-haspopup="true" aria-expanded="false">Business Continuity<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Mappatura del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#rischio-soci">Rischio Soci</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="dropdown-submenu">
<a class="dropdown-item dropdown-toggle" href="#" data-toggle="dropdown">Trattamento del Rischio<span class="caret"></span></a>
<ul class="dropdown-menu">
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-ambiente">Trattamento Ambiente e Sociale</a>
</li>
<li class="nav-item">
<a class="dropdown-item" href="#trattamento-compliance">Trattamento Compliance</a>
</li>
</ul>
</li>
<li role="separator" class="divider"></li>
<li class="nav-item">
<a class="dropdown-item" href="#survey-risk">Risk Top 10</a>
</li>
<li role="separator" class="divider"></li>
</ul>
</li>
</ul>
</div>
</nav>
<!--- End Navigation --->
<!--- Start Landing Page Section --->
<div class="landing">
<div class="row">
</div>
</div>
<!--- End Landing Page Section--->
</div>
<div id="rischio-soci" class="offset">
<div class="home">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<div style="height: 600px" id="drawRischioSoci"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
<div class="row text-md-center text-center text-sm-center" style="padding-left: 1rem">
<div class="col-md-8">
</div>
</div>
</div>
</div>
<!-- Start Trattamento Section-->
<div id="trattamento-ambiente" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Ambiente</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoAmbiente"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<!-- Start Trattamento Section-->
<div id="trattamento-compliance" class="offset">
<div class="home" style="margin-top: 2rem;">
<div class="row text-md-left text-center text-sm-center">
<div class="col-md-8 col-sm-12 col-12">
<div class="row">
<div class="col-md-12">
<h3 class="align-self-center align-items-center" align="center" style="color: black;">Trattamento Compliance</h3>
</div>
<div class="col-md-12">
<div id="drawTrattamentoCompliance"></div>
</div>
</div>
</div>
<div class="d-none d-md-block col-md-1 col-xl-1 col-lg-1">
</div>
</div>
</div>
</div>
<!-- End Trattamento Section-->
<script src="http://arisk-icelab.polito.it/engine/static/assets/web/assets/jquery/jquery.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/popper/popper.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/bootstrap/js/bootstrap.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/tether/tether.min.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/smoothscroll/smooth-scroll.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/viewportchecker/jquery.viewportchecker.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/theme/js/script.js"></script>
<script src="http://arisk-icelab.polito.it/engine/static/assets/print.css"></script>
<script src="https://use.fontawesome.com/releases/v5.5.0/js/all.js"></script>
<script>
$('.dropdown-menu a.dropdown-toggle').on('click', function(e) {
if (!$(this).next().hasClass('show')) {
$(this).parents('.dropdown-menu').first().find('.show').removeClass("show");
}
var $subMenu = $(this).next(".dropdown-menu");
$subMenu.toggleClass('show');
$(this).parents('li.nav-item.dropdown.show').on('hidden.bs.dropdown', function(e) {
$('.dropdown-submenu .show').removeClass("show");
});
return false;
});
</script>
</body>
</html>
My question is how to resolve this problem that you can see in the menu. You can replicate this page by copy paste of the code.
I posted this question 3 days ago but no answer! yet. the javascript code is from another SO answer. link
Here is the image of problem as well.
As you can see "trattamento del riscio" is active (blue) while only mapatura del rischio should be since it's submenu is open!

I am having a problem displaying the top and side navigation menus using bootstrap 4 default code provided on the MDB webpage

// function to display loader before displaying page content
var myVar;
function displayLoader() {
myVar = setTimeout(showPage, 3000);
}
function showPage() {
document.getElementById("loader").style.display = "none";
document.getElementById("myDiv").style.display = "block";
}
// side navigation initialized
$(document).ready(function() {
// SideNav Button Initialization
$(".button-collapse").sideNav();
// SideNav Scrollbar Initialization
var sideNavScrollbar = document.querySelector('.custom-scrollbar');
var ps = new PerfectScrollbar(sideNavScrollbar);
});
// SideNav Initialization
$(".button-collapse").sideNav();
#loader {
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 150px;
height: 150px;
margin: -75px 0 0 -75px;
color: #4CAF50;
}
#myDiv {
display: none;
text-align: center;
}
.double-nav .breadcrumb-dn {
color: #fff;
}
.side-nav.wide.slim .sn-ad-avatar-wrapper a span {
display: none;
}
<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="text/javascript" src="js/mdb.min.js">
</script>
<script src="dashboardjs.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous"></link>
<link rel="stylesheet" href="stylesdashboard.css">
<head>
<title>Dashboard</title>
</head>
<body class="hidden-sn grey-skin" onload="displayLoader()">
<div class="spinner-grow" role="status" id="loader">
<span class="sr-only">Loading...</span>
</div>
<div style="display: none;" " id="myDiv " class="animate-bottom ">
<!--Double navigation-->
<header>
<!-- Sidebar navigation -->
<div id="slide-out " class="side-nav sn-bg-4 ">
<ul class="custom-scrollbar ">
<!-- Logo -->
<li>
<div class="logo-wrapper waves-light ">
<img src="https://mdbootstrap.com/img/logo/mdb-transparent.png " class="img-fluid flex-center ">
</div>
</li>
<!--/. Logo -->
<!--Social-->
<li>
<ul class="social ">
<li><i class="fab fa-facebook "> </i></li>
<li><i class="fab fa-pinterest "> </i></li>
<li><i class="fab fa-google-plus "> </i></li>
<li><i class="fab fa-twitter "> </i></li>
</ul>
</li>
<!--/Social-->
<!--Search Form-->
<li>
<form class="search-form " role="search ">
<div class="form-group md-form mt-0 pt-1 waves-light ">
<input type="text " class="form-control " placeholder="Search ">
</div>
</form>
</li>
<!--/.Search Form-->
<!-- Side navigation links -->
<li>
<ul class="collapsible collapsible-accordion ">
<li><a class="collapsible-header waves-effect arrow-r "><i class="fas fa-chevron-right "></i> Submit
blog<i class="fas fa-angle-down rotate-icon "></i></a>
<div class="collapsible-body ">
<ul>
<li>Submit listing
</li>
<li>Registration form
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r "><i class="far fa-hand-pointer "></i>
Instruction<i class="fas fa-angle-down rotate-icon "></i></a>
<div class="collapsible-body ">
<ul>
<li>For bloggers
</li>
<li>For authors
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r "><i class="far fa-eye "></i> About<i class="fas fa-angle-down rotate-icon "></i></a>
<div class="collapsible-body ">
<ul>
<li>Introduction
</li>
<li>Monthly meetings
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect arrow-r "><i class="far fa-envelope "></i> Contact me<i
class="fas fa-angle-down rotate-icon "></i></a>
<div class="collapsible-body ">
<ul>
<li>FAQ
</li>
<li>Write a message
</li>
<li>FAQ
</li>
<li>Write a message
</li>
<li>FAQ
</li>
<li>Write a message
</li>
<li>FAQ
</li>
<li>Write a message
</li>
</ul>
</div>
</li>
<li><a class="collapsible-header waves-effect " href="# "><i class="fas fa-pencil-alt "></i>Blog</a></li>
<li><a class="collapsible-header waves-effect " href="# "><i class="fas fa-newspaper "></i>News</a></li>
<li><a class="collapsible-header waves-effect " href="# "><i class="fas fa-desktop "></i>Magazine</a></li>
</ul>
</li>
<!--/. Side navigation links -->
</ul>
<div class="sidenav-bg mask-strong "></div>
</div>
<!--/. Sidebar navigation -->
<!-- Navbar -->
<nav class="navbar fixed-top navbar-toggleable-md navbar-expand-lg double-nav ">
<!-- SideNav slide-out button -->
<div class="float-left ">
<i class="fa fa-bars "></i>
</div>
<!-- Breadcrumb-->
<div class="breadcrumb-dn mr-auto ">
<p>Material Design for Bootstrap</p>
</div>
<ul class="nav navbar-nav nav-flex-icons ml-auto ">
<li class="nav-item ">
<a class="nav-link "><i class="fa fa-envelope "></i> <span class="clearfix d-none d-sm-inline-block ">Contact</span></a>
</li>
<li class="nav-item ">
<a class="nav-link "><i class="fa fa-comments-o "></i> <span class="clearfix d-none d-sm-inline-block ">Support</span></a>
</li>
<li class="nav-item ">
<a class="nav-link "><i class="fa fa-user "></i> <span class="clearfix d-none d-sm-inline-block ">Account</span></a>
</li>
<li class="nav-item dropdown ">
<a class="nav-link dropdown-toggle " href="# " id="navbarDropdownMenuLink " data-toggle="dropdown "
aria-haspopup="true " aria-expanded="false ">
Dropdown
</a>
<div class="dropdown-menu dropdown-menu-right " 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>
</nav>
<!-- /.Navbar -->
</header>
<!--/.Double navigation-->
<!--Main Layout-->
<main>
<div class="container-fluid mt-5 ">
<h2>Advanced Double Navigation with a hidden SideNav under fixed Navbar:</h2>
<br>
<h5>1. Hidden side menu. Click "hamburger " icon in the top left corner to open it</h5>
<h5>2. Fixed Navbar. It will always stay visible on the top, even when you scroll down.</h5>
<div style="height: 2000px "></div>
</div>
</main>
<!--Main Layout-->
</body>
</html>
Both navigation bars aren't displaying correctly although I have used the same code provided in the link below:
https://mdbootstrap.com/docs/jquery/navigation/compositions/
in the "Double Navigation with slim sidenav and fixed navbar" section, and I don't know why I don't get the same as the live preview output, I don't know also if the code provided does need anymore styling or if it could be used as it is provided.

How to select parent for a data-toggle collapse?

Basically I am trying to get the parent of the data-toggle="collapse". Currently my navbar has a id="sidebar". I only want to get the data-toggle="collapse" that are inside of this navbar only.
I tried the following but didn't work.
$('[#sidebar > data-toggle=collapse]').prop('disabled', false);
<nav id="sidebar" class="nav flex-column">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<!-- fIRST TAB -->
<div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
<a id="toggleDropDown" class="nav-link px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div class="d-flex align-items-center justify-content-between ">
<span class="side-icons pl-3 pr-2 fas fa-home"></span>
<span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
<span class="downarrowicon mr-2 fas fa-angle-right"></span>
</div>
</a>
</div>
etc..
</nav>

The > combinator selects only immediate children. And attribute selectors must be in square brackets, but not the whole expression. Try this:
$('#sidebar [data-toggle=collapse]').prop('disabled', false);
Example:
// Returns one item.
console.log($('#sidebar [data-toggle=collapse]').length)
// Throws an error.
console.log($('[#sidebar > data-toggle=collapse]').length)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<nav id="sidebar" class="nav flex-column">
<div id="TitleSidebar" class="pt-2 pb-3 px-1 d-flex">
<span id="sidelogo" class="mr-auto p-2">Logo</span>
<button id="SideButtonOpenClose" type="button" class="btn btn-default" href="#" onclick="OpenCloseSideBar()">
<span class="fas fa-align-justify" aria-hidden="true"></span>
</button>
</div>
<!-- fIRST TAB -->
<div id="FirstTitle" class="nav-item active " onclick="changeActiveTabs(event)">
<a id="toggleDropDown" class="nav-link px-0 toggle-arrow " data-toggle="collapse" href="#submenu1" aria-expanded="false">
<div class="d-flex align-items-center justify-content-between ">
<span class="side-icons pl-3 pr-2 fas fa-home"></span>
<span class="sidebartitle text-nowrap mr-auto ">DashBoard</span>
<span class="downarrowicon mr-2 fas fa-angle-right"></span>
</div>
</a>
</div>
</nav>