Как сделать такое меню на bootstrap?

Question

[id_baton4eg]

Ищу способ правильно реализовать такой вид меню на бутстрапе


Сейчас имею такой код:

<div class="container">
			<div class="row">
				<div class="col-md-12">
					<nav class="navbar navbar-default">
						<div class="navbar-header">
							<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#topnav" aria-expanded="false">
								<span class="sr-only">Меню</span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
								<span class="icon-bar"></span>
							</button>
						</div>
						<div class="collapse navbar-collapse" id="topnav">
							<?php $args = array( // опции для вывода верхнего меню, чтобы они работали, меню должно быть создано в админке
								'theme_location' => 'top', // идентификатор меню, определен в register_nav_menus() в functions.php
								'container'=> false, // обертка списка, тут не нужна
						  		'menu_id' => 'top-nav-ul', // id для ul
						  		'items_wrap' => '<ul id="%1$s" class="nav navbar-nav %2$s">%3$s</ul>',
								'menu_class' => 'top-menu', // класс для ul, первые 2 обязательны
						  		'walker' => new bootstrap_menu(true) // верхнее меню выводится по разметке бутсрапа, см класс в functions.php, если по наведению субменю не раскрывать то передайте false		  		
					  			);
								wp_nav_menu($args); // выводим верхнее меню
							?>
						</div>
					</nav>
				</div>
			</div>
		</div>

Answer 1

[Oversec]

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

<div class="logo col-md-3"></div>

<nav class="col-md-9">
  <ul class="menu col-md-12">
    <li class="col-md-3">
      БУБУБУ
    </li>
    <li class="col-md-3">
      БУБУБУ
    </li>
    <li class="col-md-3">
      БУБУБУ
    </li>
    <li class="col-md-3">
      БУБУБУ
    </li>
    <li class="col-md-3">
      БУБУБУ
    </li>
    <li class="col-md-3">
      БУБУБУ
    </li>
  </ul>
</nav>

codepen.io/anon/pen/EyxVjY

Ну и в стилях не забудь указать

.menu {
  height: 60px;
  background: #eee;
  color: black;
}

.menu li {
  display: inline-block;
  padding: 5px 0;
  list-style-type: circle;
}

Answer 2

[monkxw]

в таком стиле

<div class="row">
	<div class="col-md-4">
		<img src="" class="logo" alt="">
	</div>
	<div class="col-md-8">
		<div class="row">
			<div class="col-md-4">
				<ul>
					<li><label for=""></label><input type="text"></li>
					<li><label for=""></label><input type="text"></li>
				</ul>
			</div>
			<div class="col-md-4">
				<ul>
					<li><label for=""></label><input type="text"></li>
					<li><label for=""></label><input type="text"></li>
				</ul>
			</div>
			<div class="col-md-4">
				<ul>
					<li><label for=""></label><input type="text"></li>
					<li><label for=""></label><input type="text"></li>
				</ul>
			</div>
		</div>
	</div>
</div>

Comments

[id_baton4eg]

а как же моб адаптация и др ? + это же Вордпресс. Немного поправил вопрос чтоб было понятнее, указал что имею на данный момент.

[monkxw]

id_baton4eg: насчет вордпресс хз . бутстраповский коллапс можно повесить куда и угодно . еще можно сделать query и скрывать это меню для мобил и показывать что то другое

[monkxw]

id_baton4eg: суть в том что бутстраповская дефолтная навигация в вашем случае не особо подходит . попробуйте сделать на основе моего примера и если на мобиле вид не устраивает скрывайте и показывайте другое