Boostrap4 NavBar с 2 рядами и складным логотипом по центру

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

HTML

HTML-код навигационной панели должен быть прямым. Вы можете взглянуть на документацию Bootstrap.

<nav class = "navbar navbar-expand-lg navbar-light bg-light">
  <a href = "#" class = "navbar-brand">
    CompanyLogo
  </a>
  <button class = "navbar-toggler" type = "button" data-toggle = "collapse" data-target = ".collapse">
    <span class = "navbar-toggler-icon"></span>
  </button>
  <div class = "collapse navbar-collapse">
    <ul class = "navbar-nav upper-controls">
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Country</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Language</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Sign up | Sign in</a>
      </li>
    </ul>
    <ul class = "navbar-nav">
      <li class = "nav-item dropdown">
        <a class = "nav-link dropdown-toggle" href = "#" data-toggle = "dropdown">
          Categories
        </a>
        <div class = "dropdown-menu">
          <a class = "dropdown-item">Cat 1</a>
          <a class = "dropdown-item">Cat 2</a>
          <a class = "dropdown-item">Cat 3</a>
          <a class = "dropdown-item">Cat 4</a>
        </div>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Home</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Live Auction</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Make Your Wish</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">How it works</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Purchase Bid Credits</a>
      </li>
      <li class = "nav-item">
        <a class = "nav-link" href = "#">Contact us</a>
      </li>
    </ul>
  </div>
</nav>

На маленьких экранах

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

Сложность заключается в том, чтобы разместить логотип по центру. Для этого, помимо настройки justify-content: center; на панели навигации, мне также нужно изменить переключатель кнопок на абсолютное позиционирование, чтобы он не занимал места, чтобы логотип не оставался в центре.

CSS

/* center the logo */
.navbar {
  justify-content: center;
}

/* in order to center the logo */
.navbar .navbar-toggler {
  position: absolute;
  right: 1rem;
  top: .5rem;
}

/* center all navbar items */
.navbar-nav {
  align-items: center;
}

Результат

На больших экранах (> 992 пикселей)

Мы можем изменить flex-flow навигационной панели на столбец, чтобы отображались 2 строки. Также мы можем изменить верхние 3 ссылки (я назначил для них пользовательский класс css «upper-controls») на абсолютное позиционирование по той же причине, что и на переключателе кнопок выше.

CSS

/* since it's expanding at lg */
@media(min-width: 992px) {
  /* in order to display in 2 rows */
  .navbar-expand-lg {
    flex-flow: column nowrap;
  }  

  /* same logic as the navbar-toggler above */
  .navbar-nav.upper-controls {
    position: absolute;
    right: 1rem;
    top: .5rem;
    font-size: 85%;
  }
}

Результат

рабочий пример:https://jsfiddle.net/aq9Laaew/257205/