When working with Bootstrap, I discovered two classes, 'dropdown-menu-end' and 'dropdown-menu-start', that almost perfectly suit my needs for a dropdown menu. However, what I truly desire is to have the dropdown menu centered on the webpage.
To learn more: https://getbootstrap.com/docs/5.0/components/dropdowns/#menu-alignment
To center the drop-down menu button on the page, I utilized the following CSS:
.dropdown .btn.dropdown-toggle {
border-radius: 50px;
position: fixed;
z-index: 99;
bottom: 45px;
right: 50%;
transform: translate(50%);
}
The issue arises from the fact that the menu opens upwards automatically due to lack of space below. Although I tried applying custom CSS to reposition the dropdown menu, Bootstrap's inline styles take precedence at runtime, preventing any overriding.
I have created an example demonstrating the problem on jsfiddle: https://jsfiddle.net/meeky333/ve98ydkj/5/
If anyone has insights on how to tackle this challenge, please share!
P.S. Here is an illustration of the desired outcome: https://i.sstatic.net/mcaUX.png