// Scrollspy .nav-pills { &.default-pills { .nav-item { a { text-align:left; color: #666; border-radius:0; &:hover { background-color: transparent; color: map-get($mdb-color, "base"); font-weight: 500; border-left: 1px solid map-get($mdb-color, "base"); } &.active { background-color: transparent; color: map-get($mdb-color, "base"); border-left: 2px solid map-get($mdb-color, "base"); font-weight: 500; box-shadow:none; &:hover, &:active, &:focus { background-color: transparent; color: map-get($mdb-color, "base"); font-weight: 500; } } } } } } .nav-pills .nav-item+.nav-item { margin-left: 0; } @media only screen and (max-width: 991px) { .sticky, .sticky-placeholder { display: none; } } #scrollspy { width: 100%; } @media only screen and (max-width: $medium-screen) { .col-md-4 .sticky, .col-lg-4 .sticky, .col-xl-4 .sticky { width: 200px; } } @media only screen and (min-width: $medium-screen) { .col-md-4 .sticky .col-lg-4 .sticky, .col-xl-4 .sticky { width: 400px; } } @media only screen and (min-width: $large-screen) { .col-md-4 .sticky { width: 300px; } } @media only screen and (min-width: $sidenav-breakpoint) { .col-md-4 .sticky { width: 350px; } } // Dotted scrollspy .dotted-scrollspy { display:block; position: fixed; top:50%; right:0; transform: translateY(-50%); background: rgba(0,0,0,.55); border-radius:2px 0 0 2px; li { display:block; padding:0 16px; &:first-child { padding-top:10px; } &:last-child { padding-bottom: 10px; } a { padding:0.5rem; span { display:block; background-color:rgba(255,255,255,.54); width:8px; height:8px; border-radius:50%; } &.active { span { background:#fff; } } } } } .scrollspy-example { overflow-y: scroll; position: relative; height: 200px; padding: 1rem; }