I’m working on a right-click Bootstrap menu, the script I’m using is developed for Bootstrap 3.3.5, while on my website I’m using Bootstrap 5.2.3,
Here is the script I’m trying to use: https://github.com/dgoguerra/bootstrap-menu
Now the dropdown menu doesn’t look the same on the demo page of the script and on my website, so I edited the demo page to use the same version (Bootstrap 5.2.3) as my wesite, and the demo changed to look like on my website which is not what I want.
Here is the comparison between the two:
The demo page is using only Bootstrap CSS (without JS)
Now what have changed in Bootstrap for the dropdown and how can I fix the script to adapt to the latest Bootstrap version?
Here is the uncompressed script: https://wecamp.tn/BootstrapMenu.js
Here is the demo main code:
<div id="demo1Box" class="text-center" style="height: 300px; border:1px solid #ddd">
<span style="line-height: 300px">Right click anywhere inside this box</span>
</div>
<script>
var menu = new BootstrapMenu('#demo1Box', {
menuEvent: 'right-click',
actions: [{
name: 'Action',
onClick: function() {
toastr.info("'Action' clicked!");
}
}, {
name: 'Another action',
onClick: function() {
toastr.info("'Another action' clicked!");
}
}, {
name: 'A third action',
onClick: function() {
toastr.info("'A third action' clicked!");
}
}]
});
Any help would be welcome. Thanks in advance!