Currently in the process of updating my website using Ruby on Rails, I was given the task of integrating Bootstrap instead of using custom CSS styling. While this change posed no issue, a problem arose when I implemented the Offcanvas menu from Bootstrap. Upon clicking the menu for the first time, a fade effect appeared twice, and each subsequent access to the Offcanvas menu resulted in the fade effect multiplying. Even after refreshing the page, the number of fades remained at two. The fade elements are generated automatically like this:
<div class="offcanvas-backdrop fade show"></div>Furthermore, when I clicked the close button provided by Bootstrap, it removed all the fade divs, regardless of their quantity, which is the desired behavior for closing the menu.
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>Is there a way for me to close the menu and make the fade disappear completely, instead of manually removing 2, then 4, and so on divs from the screen each time?
Here is the code snippet for the Offcanvas section in my file:
<nav class="navbar navbar-light bg-light fixed-top">
...
(Omitted for brevity)
...
</nav>
In an effort to minimize the multiplying fade effect, I integrated the Bootstrap script tag as a combo rather than a duo, reducing the duplication to only once per different page visited. This adjustment led to the initial usage working as intended.
<script src="https://cdn.jsdelivr.net/npm/bootstrap/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4
p" crossorigin="anonymous"></script>After rewriting the JS function, the extra fades are now removed properly, however, the menu still shows every other time (except for the initial visit). If I can find a solution where the menu appears each time and the fade effect shows only once, I will share the solution. Here is the updated JS code:
function removeExtraFade() {
let fade = document.getElementsByClassName('offcanvas-backdrop fade show')
for(let i = 0; i < fade.length; i++) {
while(fade.length > 1) {
fade[i].remove()
}
}
}