Блог

Главная - Вопросы по программированию - Не удается заставить панель навигации начальной загрузки отображать кнопку переключения при изменении размера до меньшего разрешения

Не удается заставить панель навигации начальной загрузки отображать кнопку переключения при изменении размера до меньшего разрешения

#html #css #bootstrap-4

#HTML #css #bootstrap-4

Вопрос:

Панель навигации выглядит нормально до изменения размера до меньшего разрешения. При этом все элементы навигации исчезают, а «значок гамбургера» фактически не отображается.

 <nav class="navbar navbar-custom navbar-expand-md fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="images/girlsinthegame.png" width="10%"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Комментарии:

1. Добавить navbar-light в панель навигации

Ответ №1:

Справа есть кнопка, но вам не указана кнопка цвета. итак, белый цвет. Добавьте navbar-light , чтобы стать более заметным.

Ваша демонстрация с кодом — щелкните правой верхней частью

введите описание изображения здесь

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom navbar-expand-md fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="https://www.girlsinthegame.org/wp-content/uploads/2019/08/GIG_25th_Logo-Clear-BG71128.png" height="50px"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Исправлено решение 

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA 058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5 76PVCmYl" crossorigin="anonymous"></script>

<nav class="navbar navbar-custom navbar-expand-md navbar-light fixed-top">
  <div class="container">
    <a class="navbar-brand" href="/home">
      <img src="https://www.girlsinthegame.org/wp-content/uploads/2019/08/GIG_25th_Logo-Clear-BG71128.png" height="50px"/>
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#mydropdown">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="mydropdown">
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="nav-link" href="/home">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/badgeInformation">Information</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/leaderboard">Leaderboard</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="/contact">Contact</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Комментарии:

1. Я надеюсь, что это работает отлично. @Albert Vu, если какие-либо изменения, я бы тоже с удовольствием изменил ответ :). Если ответ сработал правильно, не забудьте принять ответ .