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.

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

<li class="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 -->
    <div class="btn-group d-table nav-link p-2">
        <a class="nav-link d-inline">Dropdown link</a>
        <a class="nav-link d-inline" role="button" data-bs-toggle="dropdown">
            <i class="far fa-caret-square-down"></i>
        </a>
        <ul class="dropdown-menu ">
            <li><a class="dropdown-item" href="#">Action</a></li>
            <li><a class="dropdown-item" href="#">Another action</a></li>
            <li><a class="dropdown-item" href="#">Something else here</a></li>
            <li><hr class="dropdown-divider"></li>
            <li><a class="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:35px 0 0 -150px;
   }
}

Share