dropdown menus doesn't work on Bootstrap 5

Hi Howcanoe,

Thanks for reporting this and for the suggestion. Do you have a page where I can see this problem in action?

Christian

Dear Christian, please check the following link: https://lab.fieldphenomics.com/#publications

This problem can be somewhat fixed if you modify in the F12 console like this:

But it seems only enables the appearance of the dropdown menu, the following <a> tag in <ul> should also need an update by adding 

class="dropdown-item"

But it will still jump to the page top even updates with previous suggestions because href="#", maybe either add a jump id (e.g. herf="#bibbase" or parent container id)

or giving a keyword for the user to specify their own location, for me is the #publications works perfectly

<script src="https://bibbase.org/...&refersh_anchor=publications"></script>

<script type="javascript" src="dist/js/bootstrap.js"></script>
<link href="dist/css/bootstrap.css" rel="stylesheet">
You can try this code.

Any download link for the "dist/js/bootstrap.js" and "dist/css/bootstrap.css"? it seems link to local files

Thanks to Howcanoe Wang's nice debugging, I was able to write a script that I place right after the bibbase script to fix things up for Bootstrap 5:

bibbaseHeaderElem = document.getElementById("bibbase_header");
for (dropdownToggleElem of bibbaseHeaderElem.getElementsByClassName("dropdown-toggle")) {
    dropdownToggleElem.setAttribute("data-bs-toggle", "dropdown")
}
for (menuElem of bibbaseHeaderElem.getElementsByClassName("dropdown-menu")) {
    for (aElem of menuElem.getElementsByTagName("a")) {
        aElem.classList.add("dropdown-item");
    }
}

Hopefully bibbase will upgrade to Bootstrap 5, but until then...