CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
cssnoob
cssnoob

Reputation: 61

Bootstrap links not clickable

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

Answers (4)

adaz
adaz

Reputation: 66

this solves the problem

.navbar-header {
    position:relative;
    z-index: 9001;
}
.navbar-collapse {
    z-index: 9000;
}

Upvotes: 0

Preston Chen
Preston Chen

Reputation: 11

You could also apply: z-index:10 in css to the containing div.

Upvotes: 0

cwahlfeldt
cwahlfeldt

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

khollenbeck
khollenbeck

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

enter image description here

Upvotes: 1

Related Questions