I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browsers and mobile devices. However, I am facing challenges in implementing a feature where the navbar list items can be scrolled or slid from left to right and vice versa on a mobile device or small screen.
The Bootstrap header on a small screen appears as follows:
https://i.sstatic.net/lY6R0.png
The above image of the Bootstrap site showcases items like Home, Documentation, ..., and Themes that can be scrolled left to right and back by using the mouse (on desktop) or finger (on a mobile device).
Take a look at the image below after dragging Themes to the left:
https://i.sstatic.net/3fyNe.png
I am encountering difficulties in achieving this functionality with my code and Bootstrap. Here is the code snippet:
<header class="navbar navbar-expand navbar-light flex-column flex-md-row bd-navbar" style="background-color: yellow;">
<a class="navbar-brand" href="#">Navbar</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="navbar-nav-scroll">
<ul class="navbar-nav bd-navbar-nav flex-row">
<li class="nav-item active">
<a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Start Test</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testaaa</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testbbb</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testccc</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testddd</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Testeee</a>
</li>
</ul>
</div>
</header>
At present, my code lacks the slide functionality, and I would appreciate some assistance in identifying the missing elements. Thank you.