Reputation: 61
please see example: http://bit.ly/1H27G9I
I am trying to change the style of the standard bootstrap nav bar so that there are links on the left and right then the logo in the middle. I have succeeded with the positioning, however then left side links are not clickable anymore. I read that it might be to do with the z-index but that didn't seem to solve the problem.
I have attached my html code with some custom css. Any advice is greatly appreciated!
.headerlogo{
position: absolute;
width: 100%;
left: 0;
top: 0;
height: 125px;
}
.navbar-brand
{
padding-top: 35px;
width: 160px;
margin: 0 auto;
position: absolute;
left: 50%;
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){
.navbar-default {
height: 125px;
background-color: #151515;
}
.res-img {
max-width:160px;
margin-top: -15px;
}
}
@media (max-width: 970px){
.navbar-default {
height: 80px;
background-color: #151515;
}
.res-img {
max-width:100px;
margin-top: -15px;
}
.headerlogo
{
position: absolute;
width: 300px;
left: 0;
top: 0;
height: 125px;
}
.navbar-brand
{
float: left;
height: 50px;
padding: 15px 15px;
font-size: 18px;
line-height: 20px;
}
}
<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">
<!-- Custom CSS -->
<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>
<div class="headerlogo">
<a class="navbar-brand" rel="home" href="#" title="logo">
<img class="res-img" src="img/logo.png">
</a>
</div>
<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 -->
</nav>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
</body>
</html>
Upvotes: 0
Views: 5704
Reputation: 66
this solves the problem
.navbar-header {
position:relative;
z-index: 9001;
}
.navbar-collapse {
z-index: 9000;
}
Upvotes: 0
Reputation: 582
Get rid of the height: 125px;
property on the .headerLogo
class. This is causing the div, when at 100% width, to overlap the first menu items.
Upvotes: 4
Reputation: 16167
You say you don't think it is the z-index. But by looking at your sample. I think it is. Your header logo is positioned absolute and overlapping the links.
Doing something like this should fix it.
.headerlogo {
z-index:1;
}
.navbar-left {
position:relative;
z-index:9;
}
Basically if you are going to lay it out this way, then your nav needs to have a higher z-index than your logo.
Also note that this appears to be different depending on your screen resolution. So its quite possible you are seeing it working at some resolutions, and broken in others.
Screenshot
Upvotes: 1