My website features a row of tabs, however, as the number of tabs increases, the "Knowledgebase" tab gets pushed to the bottom and triggers a vertical scrollbar. I'm looking for a way to implement horizontal scrolling for the tab row so that all the tabs are always visible, and the "Knowledgebase" tab remains in its original position.
I attempted using overflow: scroll in the CSS, but it didn't yield the desired results. How can I achieve horizontal scrolling when necessary to keep all tabs visible and prevent the "Knowledgebase" tab from being pushed down?
To view the website layout, visit https://i.sstatic.net/NeZRC.png
Here's a snippet of the code:
<div class="col-lg-3">
<div data-spy="scroll" data-offset="0" tabindex="0" style="height: 100%; overflow-y: scroll; position: relative;">
<div class="tab-content border">
<ul class="nav nav-tabs" id="myTab" role="tablist">
<li class="nav-item" role="presentation">
<button class="nav-link active" id="tab-ticket" data-bs-toggle="tab" data-bs-target="#ticket" type="button" role="tab" aria-controls="ticket" aria-selected="true">Ticket</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact" type="button" role="tab" aria-controls="contact" aria-selected="false">Customer</button>
</li>
<li class="nav-item" role="presentation">
<button class="nav-link" id="knowledge-tab" data-bs-toggle="tab" data-bs-target="#knowledge" type="button" role="tab" aria-controls="knowledge" aria-selected="false">Knowledge</button>
</li>
</ul>
<div class="tab-content" id="myTabContent">
...
</div>
</div>
</div>
</div>