0
смотрите пример: http://bit.ly/1H27G9IBootstrap ссылки не кликабельны
Я пытаюсь изменить стиль стандартной начальной загрузки навигационной панели, так что есть ссылки на левой и правой затем логотип в середине. Я преуспел с позиционированием, однако тогда левые боковые ссылки больше не будут доступны. Я читал, что это может быть связано с z-index, но это, похоже, не решает проблему.
Я добавил свой html-код с некоторыми пользовательскими css. Любые советы высоко ценится!
.headerlogo{
position: absolute;
width: 100%;
left: 0;
top: 0;
\t height: 125px;
}
.navbar-brand
{
\t padding-top: 35px;
\t width: 160px;
\t margin: 0 auto;
\t position: absolute;
\t left: 50%;
\t margin-left: -80px; /* Half the width */
}
.navbar-left {
padding-top: 35px;
padding-left: 200px;
}
.navbar-right {
padding-top: 35px;
padding-right: 200px;
}
@media (min-width: 970px){
\t .navbar-default {
\t \t height: 125px;
\t \t background-color: #151515;
\t }
\t .res-img {
\t \t max-width:160px;
\t \t margin-top: -15px;
\t }
}
@media (max-width: 970px){
\t .navbar-default {
\t \t height: 80px;
\t \t background-color: #151515;
\t }
\t .res-img {
\t \t max-width:100px;
\t \t margin-top: -15px;
\t }
\t
\t .headerlogo
\t {
\t \t position: absolute;
\t \t width: 300px;
\t \t left: 0;
\t \t top: 0;
\t \t height: 125px;
\t }
.navbar-brand
\t {
\t float: left;
\t height: 50px;
\t padding: 15px 15px;
\t font-size: 18px;
\t line-height: 20px;
\t }
}<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">
\t
\t <!-- Custom CSS -->
\t <link href="custom.css" rel="stylesheet">
</head>
<body>
<nav class="navbar navbar-default" role="navigation" style="border-radius:0px;">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="navbar-collapse-1">
<ul class="nav navbar-nav navbar-left">
<li><a href="#">TILES</a></li>
<li><a href="#">BATHROOMS</a></li>
<li><a href="#">INSPIRATION</a></li>
</ul>
\t
\t <div class="headerlogo">
\t \t <a class="navbar-brand" rel="home" href="#" title="logo">
\t \t <img class="res-img" src="img/logo.png">
\t \t </a>
\t </div>
\t
<ul class="nav navbar-nav navbar-right">
<li><a href="#">SHOWROOMS</a></li>
<li><a href="#">CONTACT US</a></li>
<li><a href="#">CART</a></li>
</ul>
</div><!-- /.navbar-collapse -->
\t </nav>
\t <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
\t <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Что вы пытаетесь с Z-индекс? –
попробуйте изменить высоту .headerlogo для @media (max-width: 970px), так как он перекрывает вашу ссылку, надеюсь, что это поможет. – LegendaryAks
Это ваш пользовательский CSS. Если вы отключите все, все будет хорошо. Используйте встроенные классы и выравнивания bootstrap, чтобы получить изображение, в котором вы хотите. –