Как сделать так, чтобы панель навигации сайта не разбивала элементы по вертикали? (см. ниже img) - PullRequest
Новая
       29

Как сделать так, чтобы панель навигации сайта не разбивала элементы по вертикали? (см. ниже img)

1 голос
/ 13 октября 2019

пример

Я много чего пробовал с размерами div, но ничего не получалось. Вот мой текущий код:

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

<!---nav-bar-->
  <nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
    <div class="container-fluid">
      <a class="navbar-brand" href="#"><img src="img/logo1.png"></a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive">
        <div class="nav-btn-container" onclick="myFunction(this)">
          <div class="bar1"></div>
          <div class="bar2"></div>
          <div class="bar3"></div>
        </div>
      </button>
    </div>
    <div class="collapse navbar-collapse" id="navbarResponsive">
      <ul class="navbar-nav ml-auto" style="text-align: center;">
        <li class="nav-item active">
          <a class="nav-link" href="#"><i class="fa fa-fw fa-home"></i>Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><i class="fa fa-fw fa-home"></i>About me</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><i class="fa fa-fw fa-home"></i>Shop</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><i class="fa fa-fw fa-home"></i>Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><i class="fa fa-fw fa-home"></i>My work</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href=""><i class="fa fa-fw fa-home"></i>Contact</a>
        </li>
      </ul>
    </div>
  </nav>

  <!-- Script for navbar btn animation -->
  <script>
    function myFunction(x) {
      x.classList.toggle("change");
    }
  </script>

/* navbar btn */
.nav-btn-container {
  display: inline-block;
  cursor: pointer;
}

.bar1, .bar2, .bar3 {
  width: 35px;
  height: 5px;
  background-color: #333;
  margin: 6px 0;
  transition: 0.4s;
}

/* Rotate first bar */
.change .bar1 {
  -webkit-transform: rotate(-45deg) translate(-9px, 6px) ;
  transform: rotate(-45deg) translate(-9px, 6px) ;
}

/* Fade out the second bar */
.change .bar2 {
  opacity: 0;
}

/* Rotate last bar */
.change .bar3 {
  -webkit-transform: rotate(45deg) translate(-8px, -8px) ;
  transform: rotate(45deg) translate(-8px, -8px) ;
}
.navbar {
  padding: .8rem;
}
.navbar-nav li {
  padding-right: 20px;
}
.nav-link {
  font-size: 1.1em !important;
}

1 Ответ

0 голосов
/ 13 октября 2019

Используйте min-width. Вы можете найти документацию по CSS min-width свойству

Свойство min-width CSS устанавливает минимальную ширину элемента. Это предотвращает использование используемого значения свойства width меньше значения, указанного для min-width.

...