Navbar автоматически переходит в мобильный режим, несмотря на то, что находится на рабочем столе - PullRequest
Новая
       13

Navbar автоматически переходит в мобильный режим, несмотря на то, что находится на рабочем столе

0 голосов
/ 11 мая 2019

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

Я пробовал на Chrome и Firefox с теми же результатами: сжатыйnavbar на полноразмерной странице (он даже не работает правильно, так как он не очень хорошего размера).Уменьшение размера окна заставит мобильную навигационную панель работать правильно, но невозможно получить нормальную.Я пробовал разные стили navbar от Codepen, чтобы увидеть, был ли мой код неправильным, но та же проблема.Я даже попытался использовать Bootstrap 3 вместо 4, и код становится еще хуже.Например, это неправильно: https://codepen.io/mmgolden/pen/JNewdL

HTML-заголовок: 

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="assets/css/bootstrap.css" rel="stylesheet" type="text/css">

  <script src="assets/js/jquery-3.4.1.min.js"></script>
  <script src="assets/js/bootstrap.js"></script>

  <link href="assets/css/style.css" rel="stylesheet" type="text/css">

HTML-тело: 

<body>

     <nav class="navbar navbar-toggleable-md navbar-light bg-faded">
    <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMobile" aria-controls="navbarMobile" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="nav-left">
      <ul class="nav navbar-nav">
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
      </ul>
    </div>

    <a class="navbar-brand mx-auto" href="#"><div id="logo"></div></a>

    <div class="collapse navbar-collapse">
      <ul class="nav navbar-nav ml-auto">
          <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
          </li>
        <li class="nav-item">
              <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="#">Link</a>
        </li>
      </ul>
    </div>

    <!-- Mobile -->
    <div class="collapse" id="navbarMobile">
        <ul class="nav navbar-nav">
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
                <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
                <a class="nav-link" href="#">Mobile Link</a>
          </li>
          <li class="nav-item">
              <a class="nav-link" href="#">Mobile Link</a>
          </li>
        </ul>
    </div>
</nav>
<div class="slider">
</div>
</body>

CSS: 

       .slider {
         background: #333;
         height: 400px;
         width: 100%;
         }

#logo {
  background: #ccc;
  width: 150px;
  height: 70px;
}

.navbar-toggler {
  margin-top: 15px;
}

@media screen and (min-width: 992px) {
  .navbar {
      height: 130px;
   }
  #logo {
    width: 260px;
    height: 120px;
    position: relative;
    bottom: -20px;
  }
  .navbar-light .navbar-nav .nav-link {
    padding-right: 75px;
  }
  #nav-left {
    padding-left: 30px;
  }
}

Снимок экрана: https://ibb.co/KDFqfTH Мне нужно, чтобы он нормально отображался на рабочем столе и уменьшался на мобильном телефоне / планшете.Спасибо за ваше время.

...