I am struggling to responsively align items at the bottom of a side nav bar created using Bootstrap 5. I have tried various approaches, including incorporating the .offcanvas class and tweaking the styling, but none of them have worked as expected.
In the official Bootstrap Examples, there was a dropdown menu next to a user profile that was aligned at the bottom of the sidebar. However, replicating this behavior in my version of the offcanvas sidebar has been a challenge. The positioning works well on larger screens, but it breaks on smaller screens.
Below, you can find a snippet of my code where I attempted to style the dropdown placement:
<style>
.dropup {
position: absolute;
bottom:0;
padding-bottom:2vh;
}
</style>
While this styling solution works to some extent, it fails to adapt responsively on smaller screens.
To illustrate the issue, I have provided two images:
Here is the correct positioning of the dropup on a standard phone screen.
However...
When the screen height drops below 400px, the dropup overlaps with other elements in the sidebar.
Unfortunately, I am unable to directly embed the images due to my limited reputation. Please click on the links generated by StackOverflow to view the images.