Vertical scroll in tabs

I use scrollable tabs https://preview.keenthemes.com/html/metronic/docs/base/tabs#scrollable-tabs in the card header but it generates a vertical scroll as well although unnecessary. How can I prevent it?

<div class="card-header border-0 pt-6">

<div class="mb-5 hover-scroll-x">
<div class="d-grid">
<ul class="nav nav-tabs nav-line-tabs flex-nowrap text-nowrap">
<li class="nav-item">
<a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

</div>
</div>
</div>

Mete 1 year ago

1 Answers

Text formatting options

Private reply Submit

Click any option to insert into your comment. Select text first to wrap it.

**text** to make things bold
*text* to emphasize
### Heading to make headings
[link text](url) for links
![alt text](image-url) to paste in an image
- item to make a list
1. item to make an ordered list
> quote to quote somebody
`code` for single line of code
```js ... ``` for JS code block
```html ... ``` for HTML code block
```scss ... ``` for SCSS code block
```php ... ``` for PHP code block
--- for a horizontal rule
:)
:|
:(

Replies (1)

Sean Author 1 year ago

Hi,

Please try to below and it should work:

<div class="card">

    <div class="card-header border-0 pt-6">

        <div class="mb-5 hover-scroll-x">

            <div class="d-grid">

                <ul class="nav nav-tabs nav-line-tabs flex-nowrap text-nowrap">

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                    <li class="nav-item">

                        <a class="nav-link active btn btn-active-light btn-color-gray-600 btn-active-color-primary rounded-bottom-0" href="#">Playground</a>

                    

                

            </div>

        </div>

    </div>

    <div class="card-body">

        Card body

    </div>

</div>

Metronic

Go to Metronic Downloads License Guide & FAQ Purchase Metronic Refunds

Vertical scroll in tabs

Replies (1)

Metronic

Products

Legal

Stay Connected