Примечание: Я не знаю, что вы подразумеваете под "верхние 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;
}
Результат
На больших экранах (> 992px)
Мы можем изменить 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/