Bootstrap рухнул навигационная панель не работает - PullRequest
Новая
       8

Bootstrap рухнул навигационная панель не работает

0 голосов
/ 03 января 2019

Кнопка переключения появляется, когда размер окна достаточно мал, но при нажатии кнопка ничего не делает. Я проверил HTML несколько раз и убедился, что загрузочные файлы загружены правильно, но все равно безрезультатно.

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

@charset "UTF-8";

.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 1.5vmin;
  font-family: 'brandon grotesque'
}

.button {
  display: inline-block;
  border: solid white 2px;
  margin-top: 25px;
  -moz-transition: color .5s ease-in;
  -o-transition: color .5s ease-in;
  -webkit-transition: color .5s ease-in;
  background-color: transparent;
  color: white;
  text-decoration: none;
  padding: 2px;
}

.button:hover {
  background-color: white;
  color: black;
  text-decoration: none;
  transition-timing-function: ease-in-out;
}

#logo {
  height: 50px;
}

.navbar {
  min-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}
<html>
<head>
  <title>MASSERIA ELYSIUM</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar"></div>
      <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">DINING</a></li>
          <li><a href="#">LOCATION</a></li>
          <li><a href="#">ACCOMODATION</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
          <a class="button" href="#">BOOK NOW</a>
        </ul>
      </div>
    </div>
  </nav>
</body>
</html>

Я довольно новичок в написании HTML, поэтому, пожалуйста, помогите мне:)

1 Ответ

0 голосов
/ 03 января 2019

Вы добавили navbar-collapse дважды, основным из которых является пустое <div>.Замените следующее: 

<div class="collapse navbar-collapse" id="myNavbar"></div>
<div class="collapse navbar-collapse">

на следующее: 

<div class="collapse navbar-collapse" id="myNavbar">

Удалите один раз, и вы получите эту работу: 

@charset "UTF-8";
.navbar-nav.navbar-center {
  position: absolute;
  left: 50%;
  transform: translatex(-50%);
  font-size: 1.5vmin;
  font-family: 'brandon grotesque'
}

.button {
  display: inline-block;
  border: solid white 2px;
  margin-top: 25px;
  -moz-transition: color .5s ease-in;
  -o-transition: color .5s ease-in;
  -webkit-transition: color .5s ease-in;
  background-color: transparent;
  color: white;
  text-decoration: none;
  padding: 2px;
}

.button:hover {
  background-color: white;
  color: black;
  text-decoration: none;
  transition-timing-function: ease-in-out;
}

#logo {
  height: 50px;
}

.navbar {
  min-height: 80px;
}

.navbar-toggle {
  /* (80px - button height 34px) / 2 = 23px */
  margin-top: 23px;
  padding: 9px 10px !important;
}

@media (min-width: 768px) {
  .navbar-nav>li>a {
    /* (80px - line-height of 27px) / 2 = 26.5px */
    padding-top: 26.5px;
    padding-bottom: 26.5px;
    line-height: 27px;
  }
}

@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    color: #fff;
    transform: none;
    font-size: 1em;
  }
}
<html>

<head>
  <title>MASSERIA ELYSIUM</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="main.css">
  <link rel="stylesheet" href="https://use.typekit.net/psn0aff.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-inverse">
    <div class="container-fluid">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>                        
        </button>
      </div>
      <div class="collapse navbar-collapse" id="myNavbar">
        <ul class="nav navbar-nav navbar-center">
          <li class="active"><a href="#">HOME</a></li>
          <li><a href="#">DINING</a></li>
          <li><a href="#">LOCATION</a></li>
          <li><a href="#">ACCOMODATION</a></li>
          <li><a href="#">SERVICES</a></li>
          <li><a href="#">GALLERY</a></li>
          <li><a href="#">CONTACT</a></li>
          <a class="button" href="#">BOOK NOW</a>
        </ul>
      </div>
    </div>
  </nav>
</body>

</html>

Для вашей второй проблемы: 

.navbar-nav.navbar-center {
  position: absolute;
}

Удалите это в медиазапросе для небольших устройств и тоже удалите преобразование. 

@media screen and (max-width: 767px) {
  .navbar-nav.navbar-center {
    position: static;
    transform: none;
    font-size: 1em;
  }
}

Предварительный просмотр

preview

...