Trying to create a navbar with a split dropdown button has been a challenge. The design either goes awry when the screen is narrow and the navbar is hidden behind the toggle, or it doesn't look right on a wider screen when the navbar is expanded.
Currently using Bootstrap 5.0.2.
Stumbled upon this advice suggesting to add the d-table class to the button group. However, the outcome looks good in vertical mode but not in horizontal mode, as shown below:
https://i.sstatic.net/r72LP.png
https://i.sstatic.net/q2Rx0.png
Without the d-table class, it looks strange in vertical mode but fine in horizontal mode, like this:
https://i.sstatic.net/sZNxL.png
https://i.sstatic.net/i61YW.png
Desired look on small screens would be like this, with the split button:
https://i.sstatic.net/L6krs.png
One possible solution might involve using JavaScript to dynamically add or remove the d-table class based on screen width. This avoids hardcoding a specific screen width value. Alternatively, detecting when the navbar collapses could also work.
Snippet of the code used in this scenario:
CSS:
.dropdown-toggle-split {
border: none;
outline: none;
position: relative;
}
...
HTML:
<!DOCTYPE html>
<html lang="en" class="h-100">
...
If you have any insight or a solution to share, it would be greatly appreciated!