mdss

Чтобы заработало свойство overflow, необходимо ограничить максимальную высоту блока. Например:

#navbarNav {
  overflow: auto;
  max-height: 70vh; /*  под себя измените высоту */
}

велосипед

$('.special_carusel2').css("height", height_ggg + 1 + "px");

.col+.col+.col>.col__sub+.col__sub

Самое простое решение через псевдоэлемент
https://codepen.io/mdss/pen/wyKVbR

указывать высоту не обязательно. Т.к. элемент с фиксированным положением, можно указать ему границы

.menu {
position:fixed;
top:0;
bottom:0;
left:0;
overflow-y:auto;
}

Самое простое решение для прижатия кнопок в меню это будут флексы

.menu {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
	flex-direction:column;
	position:fixed;
	top:0; bottom:0; left:0;
	width:200px;
}
	.menu__main {
		flex:1;
	}
	.menu__bottom {
		flex-shrink:0;
		height:50px;
	}

<div class="menu">
	<div class="menu__main"></div>
	<div class="menu__bottom">%buttons%</div>
</div>

использовать событие destroy

$(window).on('load resize', function() {
	if ($(window).width() < 992) {
		$element.data('select2').destroy();
	}
});

т.к. высота нижнего блока судя по всему фиксированная (я про размер кнопки), то проще всего снизу делать отступ, а для самой кнопки применить абсолютное позиционирование.

Леа Вероу в одной из глав своей книги уделила время реализации этой фичи.
Вот ее пример:
dabblet.com/gist/24484257bc6cf7076a8e

если подключен jquery, то есть плагин
https://github.com/Keyframes/jQuery.Keyframes

оборачивайте изображение во что-нибудь, и уже у этого слоя создаете псевдоэлемент с внутренней тенью.
Пример:
https://codepen.io/mdss/pen/wrbOdJ

добавьте функцию анимации. Например

@keyframes fadeIn {
from {opacity:0}
to {opacity:1}
}

использование

.submenu--active {
display:block;
animation:fadeIn .5s;
}

потому что они находятся в скрытом блоке. При переключии табов надо обновлять карусель.