Bootstrap 4, переключение меню «выпадающий» (только в мобильном представлении) - PullRequest
0 голосов
/ 11 сентября 2018

У меня есть простая навигационная панель в самом верху моего сайта только с двумя ссылками.Когда представление становится мобильным (планшетным и / или мобильным), эти ссылки исчезают, и отображается значок меню «гамбургер».Однако, когда я нажимаю на него, ничего не показывает.Я хочу, чтобы обе мои ссылки отображались при нажатии на значок меню.

Desktop view Mobile view

/* Registration Navbar */

.registration-navbar {
  background-color: #8ABE57;
  height: 45px;
}

.registration-navbar ul li a {
  color: #ffffff;
  font-size: 0.8em;
}

.registration-navbar ul li a:hover {
  color: #31353D;
}

.navbar-dark,
.navbar-toggler {
  border: none;
  color: rgba(255, 255, 255, 0);
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">

<nav class="navbar navbar-expand-lg navbar-dark registration-navbar">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
                  <span class="navbar-toggler-icon"></span>
                </button>
  <div class="collapse navbar-collapse my-auto" id="navbarNav">
    <ul class="navbar-nav ml-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Mi Cuenta</a>
      </li>
      <li class="nav-item active">
        <a class="nav-link" href="#">Registrarme</a>
      </li>
    </ul>
  </div>
</nav>

1 Ответ

0 голосов
/ 11 сентября 2018

Снимите высоту: 45px с .registration-navbar, и это решит проблему.

/* Registration Navbar */

.registration-navbar {
  background-color: #8ABE57;
}

.registration-navbar ul li a {
  color: #ffffff;
  font-size: 0.8em;
}

.registration-navbar ul li a:hover {
  color: #31353D;
}

.navbar-dark,
.navbar-toggler {
  border: none;
  color: rgba(255, 255, 255, 0);
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...