Bootstrap гамбургер значок navbar отсутствует - PullRequest
Новая
       83

Bootstrap гамбургер значок navbar отсутствует

0 голосов
/ 05 июля 2018

Я использую Boosttrap 4, чтобы сделать панель навигации, когда я уменьшаю окно, гамбургер появляется, но он не отображается. Это функционально, но я не вижу этого. Кто-нибудь может мне помочь с этим? 

<nav class="navbar navbar-expand-lg navbar-custom">
    <div class="container"><a href="#landing" class="navbar-brand">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="navbar-collapse collapse" id="navbarNavDropdown">
            <ul class="navbar-nav nav-fill w-100">
                <li class="nav-item">
                    <a class="nav-link" href="#landing">HOME</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#about">ABOUT</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#skill">SKILL</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#work">EXPERIENCE</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" href="#contact">CONTACT</a>
                </li>
            </ul>
        </div>
    </div>
</nav>

Ответы [ 3 ]

0 голосов
/ 05 июля 2018

Похоже, что к элементу nav не применена цветовая схема. Без тематических классов значок гамбургера прозрачен.

Добавление navbar-dark bg-dark к элементу nav решит эту проблему.

Документация по цветовым схемам

0 голосов
/ 05 июля 2018

Bootstrap 4 добавил новые классы: navbar-dark и navbar-light, в зависимости от цвета фона, вы можете добавить один из этих классов в вашу навигацию, чтобы сделать ваш мобильный переключатель видимым.

Вы также можете сделать что-то совершенно нестандартное с цветом фона (как показано ниже) или поменяв местами значок по умолчанию. 

    <nav class="navbar navbar-dark bg-dark">
       <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-dark bg-primary">
      <!-- Navbar content -->
    </nav>

    <nav class="navbar navbar-light" style="background-color: #e3f2fd;">
      <!-- Navbar content -->
    </nav>

И, если вы действительно хотите получить увлекательную анимацию и пользовательские значки, ознакомьтесь с примерами настройки панели навигации: Примеры MDBootstrap

0 голосов
/ 05 июля 2018

По умолчанию ваш тоглер прозрачен; 

.navbar-toggler {
padding: .25rem .75rem;
font-size: 1.25rem;
line-height: 1;
background-color: transparent;
border: 1px solid transparent;
border-radius: .25rem;

}

...