Specific requirements:
- Only buttons should be horizontally scrollable
- Dropdown of buttons should appear just below the button without shifting the paragraph below
Things I have attempted:
- Tried using overflow:hidden/auto, overflow-x:auto, and position:static (pushes content down)
.navbar-nav{
overflow-x: auto;
width: 440px;
}
<nav class="navbar navbar-expand-lg bg-light">
<div class="container-fluid">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="#">Home</a>
</li>
...
</ul>
</div>
</div>
</nav>
.navbar-nav .dropdown-menu {
position: static;
}