1
Я пытаюсь настроить Bootstrap, но у меня возникла проблема. На меньших экранах меню перекрывает заголовок navbar. Приведенное ниже изображение, с помощью которого происходит перекрытие (зеленый и синий квадраты перекрывают серый # navbar-min). Меню Bootstrap, перекрывающее навигационный заголовок для меньших экранов
код, как показано ниже:
1.html
<header role="banner">
<div class="row">
<div class="col-sm-6 col-md-offset-4 col-md-4">
<a id="logo" href="#"> <img src="../static/images/logo_small.png" data-medium="../static/images/logo_medium.png" data-large="../static/images/logo_large.png"></a>
</div>
<div class="col-sm-6 col-md-4">
<ul class="nav navbar-nav pull-right">
<li><a href="#"><span class="glyphicon glyphicon-user"></span> Sign Up</a></li>
<li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
</ul>
</div>
</div>
<nav class="navbar navbar-md" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-min">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbar-min">
<ul class="nav navbar-nav">
<li class="active"><a href="#">Home</a></li>
<li><a href="#">Page 1</a></li>
<li><a href="#">Page 2</a></li>
<li><a href="#">Page 3</a></li>
</ul>
</div>
</div>
</nav>
</header>
2.custom_bootstrap.css
/* Create a medium height at 40px */
.navbar-md {min-height:40px; background: url(../images/bannerBG.png) 0 0 repeat-x;border-radius:0px; -webkit-border-radius:0px; -moz-border-radius:0px;}
.navbar-md .navbar-nav>li>a { color:#fff;}
.navbar-md .navbar-toggle
{
position:relative;
float:right;
padding:9px 10px;
margin-top:8px;
margin-right:15px;
margin-bottom:8px;
background-color:#fff;
background-image:none;
border:1px solid #444;
border-radius:4px;
}
.navbar-md .navbar-toggle .icon-bar
{
display:block;
width:22px;
height:2px;
border-radius:1px;
border:1px solid #444;
}
.navbar-nav>li>a
{
color:#fff;
padding:20px;
outline: 0;
}
.navbar-nav>li>a:active,
.navbar-nav>li>a:focus
{
/*color:#C41E39; */
background: none;
}
.navbar-nav>li>a:hover
{
color:#C41E39;
background: none;
}
body:after {
content: 'global';
display: none;
}
@media screen and (min-width: 35em) {
body:after {
content: 'tablet';
display:none;
}
}
@media screen and (min-width: 56em) {
body:after {
content: 'desktop';
display:none;
}
}
header[role="banner"] #logo {
display: block;
margin: 10px;
text-align: center;
outline: 0;
}
header[role="banner"] .row {
background: url(../images/topBG.png) 0 0 repeat;
}
@media screen and (max-width: 768px){
#navbar-min {
margin-left: -15px;
margin-right: -15px;
background-color: #EEE;
color:black;
}
.navbar-nav>li>a {
padding: 5px;
margin-right: 20px;
}
}
Как бы вы хотели, чтобы меню отображалось на мобильных устройствах? –
Вы не использовали класс col-xs- *. попробуйте его после использования col-xs- * classes. –