Fixed меню bootstrap не скроллится?

Question

[Sanchik97]

Есть фиксированное меню bootstrap:

<nav class="navbar navbar-expand-lg navbar-fixed-top navbar-light" style="background-color: #fff;">
					<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarTogglerDemo03" aria-controls="navbarTogglerDemo03" aria-expanded="false" aria-label="Toggle navigation">
					<i class="fas fa-bars"></i>
					</button>
					<a class="navbar-brand header-logo" href="index.html">
						<img class="header-logo__img" src="img/logo.png" alt="Логотип">
					</a>
					<a class="header-search__link" href="#header-search__link"><i class="header-search__icon fas fa-search"></i></a>
					<div class="collapse navbar-collapse" id="navbarTogglerDemo03">
						<ul class="navbar-nav mr-auto mt-2 mt-lg-0">
							<li class="nav-item active">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-info-circle"></i> О компании <span class="sr-only">(current)</span></a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-question"></i> Вопросы и ответы</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-map-marker-alt"></i> Локации СЦ</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon far fa-user"></i>Контакты</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-edit"></i>Статьи</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-cog"></i>Услуги</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-hand-holding-usd"></i>Оплата</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-newspaper"></i>Новости</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon far fa-comment"></i>Отзывы</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon far fa-handshake"></i>Сотрудничество</a>
							</li>
							<li class="nav-item">
								<a class="nav-link" href="#"><i class="nav-icon fas fa-briefcase"></i>Вакансии</a>
							</li>
						</ul>
					</div>
				</nav>

На некоторых смартфонах с маленьким экраном некоторая часть меню не помещается на экране. Из-за position:fixed; меню не скроллится. Как решить проблему со скроллом?

Answer 1

[Павел]

Экстрасенсы на учебе. Без демо, никак.

Comments

[Sanchik97]

https://jsfiddle.net/b5asL4he/

[Павел]

Sanchik97, добавить media запрос для маленьких экранов:

@media (max-width: 400px) {
.navbar-collapse {max-height:300px;    overflow: auto;}
}