0
мой BOOTPLY ... MY BOOTPLY HEREКак плавать правильные заголовки меню
мне нужны пункты меню (автомобиль, дом, улица, лодка), чтобы плавать прямо на том же уровне по высоте, что и мой логотип (для размеров рабочего стола) и все иначе оставаться таким же, как и текущий (включая поведение мобильного переключателя).
Этого можно достичь?
/* CSS used here will be applied after bootstrap.css */
/***** Menu *****/
.navbar-default .navbar-nav > .active > a,.navbar-default .navbar-nav > .active > a:focus,.navbar-default .navbar-nav > .active > a:hover {
color: #fff;
}
.menu-container {
background-color: #fff;
border-bottom: 1px solid #000;
min-height: 20px;
position: relative;
}
.navbar-nav a:hover {
color: #000;
}
.navbar-nav a:link {
font-size: 12px;
font-family: 'century schoolbook';
color: #000;
text-decoration: overline;
text-decoration-color: #A10000;
}
.brand-name a {
text-decoration: none;
}
.brand-name img {
max-width: 137px;
padding: 8px;
/*position:absolute;*/
left: 0;
}
ul {
list-style-type: none;
}
.navbar-form input,.form-inline input {
width: auto;
}
#nav.affix {
position: fixed;
top: 0;
width: 100%;
z-index: 10;
}
#sidebar.affix-top {
position: static;
}
#sidebar.affix {
position: fixed;
top: 80px;
}
.navbar-default .navbar-nav > li > a {
color: #000;
font-family: 'LuzSans-Book';
font-size: 14px;
}
.navbar-default .navbar-nav > li > a:hover {
background-color: #A10000;
color: #000;
\t margin-top:4px;
\t margin-bottom:4px;
}
.navbar-default .navbar-nav > .active > a {
background-color: #000;
\t margin-top:4px;
\t margin-bottom:4px;
}
.navbar-custom-social {
height: 15px;
float: right;
clear: none;
margin-right: 25px;
}
.navbar-fixed-top {
padding-top: 0;
}
.navbar-default .navbar-brand {
color: #777;
padding: 0;
height: inherit;
float: none;
display: inline-block;
}
.navbar {
margin-bottom: 0;
}
.navbar-nav {
margin: 0;
}
.navbar-default {
background-color: transparent;
border: 0;
}
.navbar-collapse.collapse.in {
width: 100%;
}
p.ajaxSearch_intro {
margin: 0;
}
.navbar-default .navbar-collapse,.navbar-default .navbar-form {
padding: 0;
}
/*toggle btn */
.navbar-default .navbar-toggle {
border: 1px solid #000;
border-radius: 0;
padding: 5px 10px;
color: #000;
background-color: #A10000;
}
#nav.affix .logo_wrap {
display: none;
}
#nav.affix-top .logo_wrap {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}
#nav.affix .logo_wrap-text {
display: none;
}
#nav.affix-top .logo_wrap-text {
display: block;
background-image: url(/assets/images/header-background.png);
background-color: #fff;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/js/bootstrap.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha/css/bootstrap.css" rel="stylesheet"/>
<header id="nav">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="navbar navbar-default navbar-static">
<div class="clearfix container navbar-fixed-top">
<div class="clearfix menu-container">
<div class="pull-right clearfix toggle_btn_wrap">
<a class="navbar-toggle" data-target=".navbar-collapse" data-toggle="collapse" href="#"><i class="fa fa-bars"></i></a>
</div>
<div class="pull-left brand-name">
<a href="#"><img alt="***brandlogo***" src="assets/images/logo.png"></a>
</div>
<div class="clearfix prevent-float"></div>
<div class="navbar-collapse collapse">
<ul class="navbar-nav nav">
<li>
<a href="/car" title="car">car</a>
</li>
<li>
<a href="/house" title="house">house</a>
</li>
<li>
<a href="/street" title="street">street</a>
</li>
<li>
<a href="/boat" title="boat">boat</a>
</li>
\t \t </ul>
</div>
</div>
</div>
</div></div></div>
</div></header>
только что попробовал, не смог заставить его работать. Элементы меню не выравнивают один и тот же уровень высоты, а также перемещают меню мобильного переключения. Можете ли вы показать мне решение в моем BOOTPLY? Я запутался. – raulbaros
OK; Я на один шаг ближе, с встроенным блоком это лучше, однако теперь мое мобильное меню переключения также плавает прямо, а не полная ширина. Есть идеи? – raulbaros
Не могли бы вы разместить ссылку на то, что у вас есть – Wowsk