Bootstrap панель навигации: проблема с гамбургером после регулировки высоты панели навигации

Question

Моя панель навигации работает отлично, гамбургер расширяется вниз по меню нормально. Но после настройки высоты навигационной панели гамбургер не работает идеально. Кнопка гамбургера работает, она все еще расширяется вниз, но показывает только первое меню, остальное было вырезано, как будто застряло после того, как на полпути показывалось первое меню (Home), и не будет расширять меню. После некоторой настройки гамбургер будет работать только на 100% с высотой по умолчанию. Какие-нибудь решения?

<nav id="navbarMain" class="navbar navbar-expand-lg navbar-dark fixed-top shadow">
    <a class="navbar-brand" href="/"> <i class="fas fa-book text-light"></i> Greybook</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>
      
    <div class="collapse navbar-collapse" id="navbarContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item">
                <a class="nav-link" href="#">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Toys</a>
            </li>
            <li class="nav-item">
                <a class="nav-link disabled" href="#">Store</a>
            </li>
        </ul>
    </div>
</nav>

My CSS:

#navbarMain {
    background-color: #525252;
    height: 75px;
}

Answer 1

Проблема в том, что вы устанавливаете фиксированный height. Вместо этого вы можете использовать min-height: 75px;, чтобы ваша навигационная панель снова заработала (см. fiddle ). Однако это решение не заботится о сохранении этой высоты.

Я бы порекомендовал вам увеличить высоту навигационной панели, отрегулировав ее заполнение (изначально определенное как padding: .5rem 1rem;), например:

padding: 1rem;

while приведет к появлению панели навигации с высотой 72px.

You can find the здесь работает скрипт .

Удачи!