@id_baton4eg

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

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

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

<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>
  • Вопрос задан
  • 471 просмотр
Пригласить эксперта
Ответы на вопрос 2
@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;
}
Ответ написан
Комментировать
monkxw
@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>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы