Bootstrap 4 Split Navbar - Responsive Dropdown Below Not Beside

I have a navbar with a split dropdown. The particular portion of the HTML I'm interested in is this:

Solution 1:

Just add container class in the btn-group div. The misalignment is because of the btn-group class is defined as flex item. Try adding container class, it may solve the issue.

<divclass="container p-0 btn-group"><ahref="http://www.bhastings.com/blog"target="_blank"class="nav-link">Blog</a><aclass="nav-link dropdown-toggle dropdown-toggle-split"id="dropdownMenuLink_blog"data-toggle="dropdown"aria-haspopup="true"aria-expanded="false"><spanclass="sr-only">Toggle Dropdown for Blog Links</span></a><divclass="dropdown-menu dropdown-menu-right"aria-labelledby="dropdownMenuLink_blog"><divclass="dropdown-header">Categories | <ahref="http://bhastings.com/blog"target="_blank"style="color: #bc5b16;">Blog Main</a></div><aclass="dropdown-item"href="http://bhastings.com/blog?cat=20"target="_blank"><small><em>Articles for Everyone</em></small></a><aclass="dropdown-item"href="http://bhastings.com/blog?cat=8"target="_blank"><small><em>Access to Justice Commentary</em></small></a><aclass="dropdown-item"href="http://bhastings.com/blog?cat=5"target="_blank"><small><em>Law Commentary</em></small></a><aclass="dropdown-item"href="http://bhastings.com/blog?cat=6"target="_blank"><small><em>Legal Futurism</em></small></a><aclass="dropdown-item"href="http://bhastings.com/blog?cat=4"target="_blank"><small><em>Resources for Lawyers</em></small></a><aclass="dropdown-item"href="http://bhastings.com/blog?cat=36"target="_blank"><small><em>Technology</em></small></a></div></div>

Solution 2:

The HTML below works when you expand a collapsed navbar!

Bootstrap: 5.0.0-beta2

<liclass="nav-item col-6 col-md-auto"><!-- NOTE: d-table on the group and nav-link d-inline for the inner <a> tags is a must for split button to work properly when collapsed/expanded --><divclass="btn-group d-table nav-link p-2"><aclass="nav-link d-inline">Dropdown link</a><aclass="nav-link d-inline"role="button"data-bs-toggle="dropdown"><iclass="far fa-caret-square-down"></i></a><ulclass="dropdown-menu "><li><aclass="dropdown-item"href="#">Action</a></li><li><aclass="dropdown-item"href="#">Another action</a></li><li><aclass="dropdown-item"href="#">Something else here</a></li><li><hrclass="dropdown-divider"></li><li><aclass="dropdown-item"href="#">Separated link</a></li></ul></div></li>

Solution 3:

I guess this isn't a very clean answer but I added some margin and it does the job. But can't wait to see a better solution.

@media (max-width: 992px) { 
   .dropdown-menu {
        margin:35px00 -150px;
   }
}

Share