Найден ряд примеров, но ни один из них не является тем, что я ищу, и не могу заставить его работать так, как мне нужно.Двойное меню бутстрапа с navbar-fixed-top
This is the closest example I can find, хотя bootply не похоже на то же самое.
Проблема в том, второе меню получает скрыт, когда первое меню расширяется (в мобильном режиме)
мне нужно 2 меню, оба прилипли к вершине. Я могу заставить его работать с> = small, но xs с сложенным меню убивает меня. В основном ищет стандартное исправление nav в два раза. Я не хочу, чтобы второе меню скрывалось при первом расширении. Вам нужно, чтобы он выглядел и действовал точно так же.
Извините, я - бэкэнд с ограниченным передним концом.
Если нет прямого ответа, следует ли мне устанавливать метки Nav? Или должно ли второе меню быть в div или что-то еще вместо этого? Я бы подумал, что копирование примера дважды из бутстрапа будет работать, но, очевидно, нет. Если я могу просто заставить вторичное меню скрываться, я думаю, что смогу понять остальное.
(Bootply)
/* CSS used here will be applied after bootstrap.css */
.HeaderMenu {
margin-top: 53px;
}
.HeaderMenu .navbar {
background-color: white;
}
.HeaderMenu .navbar-nav {
width: 100%;
text-align: center;
margin-top: 0;
}
.HeaderMenu .navbar-nav > li {
float: none;
display: inline-block;
}
@media (max-width: 790px) {
/*Try and stop login link from wrapping when small*/
.HeaderMenu .navbar-nav > li {
float: left;
}
}
.HeaderMenu span {
font-size: 22px;
font-weight: 600;
}
.HeaderMenu .collapsedMenu > li {
display: block
}
/*Menu Collapse overrides*/
.collapsedMenu > li > a {
padding: 3px;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<header class="HeaderMenu">
<nav class="navbar navbar-fixed-top navbar-default" style="">
<!-- header nav -->
<div class="container-fluid" style="padding-left: 0; padding-right: 0;">
<div class="navbar-header visible-xs" style="background-color: white; margin-right: 10px; height: 52px;">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-main-collapse" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<div class="navbar-left visible-xs Logo" style="margin-left: 5px; margin-top: 18px"><a href="">Logo</a>
</div>
</div>
<div class="collapse navbar-collapse" id="navbar-main-collapse" style="background-color: white;">
<!--Collapsed/expanded Menu-->
<div class="visible-xs" style="text-align: center;">
<ul class="nav collapsedMenu">
<li class="active" style=""><a href="#" style="padding: 3px;"><span>H</span>OME</a>
</li>
<li style=""><a href="#" style="padding: 3px;"><span>W</span>IKIs</a>
</li>
<li><a href="#"><span>M</span>Y <span>S</span>ETUP</a>
</li>
<li><a href="#"><span>N</span>OTIFICATIONS</a>
</li>
<li><a href="#"><span>S</span>TORE</a>
</li>
</ul>
</div>
<!--Uncollapsed Menu-->
<div class="container-fluid hidden-xs" style="">
<ul class="nav navbar-nav" style="">
<li class="navbar-left Logo hidden-sm" style="">
<a href="#" style="">Logo</a>
</li>
<li class="navbar-left LogoSm visible-sm" style="">
<a href="#" style="">Logo</a>
</li>
<li class="active" style=""><a href="#"><span>H</span>OME</a>
</li>
<li><a href="#"><span>W</span>IKI</a>
</li>
<li><a href="#"><span>N</span>OTIFICATIONS</a>
</li>
<li><a href="#"><span>S</span>TORE</a>
</li>
<li class="navbar-right hidden-sm" style="margin-right: 0; width: 155px;"><a href="#">Login</a>
</li>
<li class="navbar-right visible-sm" style="margin-right: 0; width: 140px;"><a href="#">Login</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<nav class="navbar navbar-default" role="navigation">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Sub menu</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-2">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Sub menu link1</a>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</nav>
</header>
Вы на самом деле нужно два из точно такой же меню сложенных друг на друга или просто пространство ниже стандартного нав для других элементов? – vanburen
2 точно так же. 1 Main, 1 Sub. Оба должны придерживаться вершины, как пример bootply, и оба краха. Когда основной объект расширен, он должен переместить второй навигатор вниз, а не закрывать его. – VirtualLife