I am currently working on a new project and encountering an issue with the width of a Bootstrap 5 dropdown. The problem lies in the discrepancy between the button width and the menu width.
Although it may seem simple, I am having trouble resolving it as I am still new to Bootstrap.
What I am trying to achieve is to have the button width set to 170px when the dropdown is closed, and then have it match the menu width when the menu is displayed.
For example:
Menu closed: https://i.sstatic.net/KqaFw.png
Menu open: https://i.sstatic.net/pnA5c.png
Currently, the button does not match the menu width.
I haven't included any code as it's just the standard bootstrap dropdown.
Can someone please help me figure out how to fix this issue? Thank you.
SOLUTION: In your CSS, add the following:
.dropdown-toggle.show,
.dropdown-menu.show {
width: ***px;
}