Is it possible to create a vertical scroll bar for my nav pills when they exceed the screen size?
/*
*
* ==========================================
* CUSTOM UTIL CLASSES
* ==========================================
*/
.nav-pills-custom .nav-link {
color: #aaa;
background: #fff;
position: relative;
}
.nav-pills-custom .nav-link.active {
color: #45b649;
background: #fff;
}
/* Add indicator arrow for the active tab */
@media (min-width: 992px) {
.nav-pills-custom .nav-link::before {
content: '';
display: block;
border-top: 8px solid transparent;
border-left: 10px solid #fff;
border-bottom: 8px solid transparent;
position: absolute;
top: 50%;
right: -10px;
transform: translateY(-50%);
opacity: 0;
}
}
.nav-pills-custom .nav-link.active::before {
opacity: 1;
}
/*
*
* ==========================================
* FOR DEMO PURPOSE
* ==========================================
*/
body {
min-height: 100vh;
background: linear-gradient(to left, #dce35b, #45b649);
}If you have multiple nav pills that are causing your page to stretch, check out this demo here.