CODEWITHSUNDEEP
htmlcssimage
Becky
Becky

Reputation: 2289

Image covering links

I am stumped on the following. I just added a logo to a site and for some reason, my nav panel links that are to the right of the logo/image are now not clickable. It appears that the image is somehow over-taking them, but I do not see how. In the console/inspect it doesn't show the image over-taking them?

Does anyone see why this is happening?

.header {
	margin: 0;
	background-color: rgba(0,0,0,0);
	height: 80px;
	z-index: 9999;
	position: absolute;/*test*/
	width: 100%;
}
.header_wrap {
	margin: 0 4%;
	padding: 2% 0 0 0;
}
.logo {
	position: absolute;
	margin-top: -15px;
	cursor: pointer;
}
.logo-img {
	/*height: 75px;
	width: auto;*/
	height: auto;
	width: 25%;
}
.logo a {
	color: #000;
	text-decoration: none;
}
.nav-list {
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav-list > a {
	display: inline-block;
	padding: 0px 15px;
	text-decoration: none;
}
.nav-list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #000;
}
.nav-list > a > li:hover {
	color: #3f3f3f;
}
<header class="header">
  <div class="header_wrap">
      <div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div>
      <ul class="nav-list">
          <a href="work"><li>WORK</li></a>
          <a href="approach"><li>APPROACH</li></a>
          <a href="services"><li>SERVICES</li></a>
          <a href="discuss-project"><li>PROJECT</li></a>
          <a href="contact"><li>CONTACT</li></a>
      </ul>
  </div>
</header>

Upvotes: 1

Views: 1333

Answers (4)

ketan
ketan

Reputation: 19341

I don't understood whay you have give position:absolute to logo but, add z-index: -1; to .logo will make your link clickable..

.header {
	margin: 0;
	background-color: rgba(0,0,0,0);
	height: 80px;
	z-index: 9999;
	position: absolute;/*test*/
	width: 100%;
}
.header_wrap {
	margin: 0 4%;
	padding: 2% 0 0 0;
}
.logo {
	position: absolute;
	margin-top: -15px;
	cursor: pointer;
  z-index: -1;
}
.logo-img {
	/*height: 75px;
	width: auto;*/
	height: auto;
	width: 25%;
}
.logo a {
	color: #000;
	text-decoration: none;
}
.nav-list {
	margin: 0;
	list-style: none;
	text-align: right;
	width: 100%;
	padding: 0;
}
.nav-list > a {
	display: inline-block;
	padding: 0px 15px;
	text-decoration: none;
}
.nav-list > a > li {
	text-decoration: none;
	font-size: 1.2em;
	color: #000;
}
.nav-list > a > li:hover {
	color: #3f3f3f;
}
<header class="header">
		<div class="header_wrap">
			<div class="logo"><a href="/"><img src="http://optimumwebdesigns.com/images/LogoOpt2.png" class="logo-img" alt="Optimum Designs"></a></div>
				<ul class="nav-list">
					<a href="work"><li>WORK</li></a>
					<a href="approach"><li>APPROACH</li></a>
					<a href="services"><li>SERVICES</li></a>
					<a href="discuss-project"><li>PROJECT</li></a>
					<a href="contact"><li>CONTACT</li></a>
				</ul>
		</div>
	</header>

Edit:

Other solution is give display: block; to .logo a will work. Fiddle

Upvotes: 2

Ikhlak S.
Ikhlak S.

Reputation: 9034

You don't really need to use position: absolute;. Instead use display:inline or inline-block and avoid overlapping.

You CSS would look like this:

.nav-list {
  display:inline; /* Add this */
    margin: 0;
    /* width:100%;  you can remove this */
    list-style: none;
    text-align: right;
    padding: 0;
}

.logo {
    display:inline; /* add this*/
    margin-top: -15px;
    cursor: pointer;
    /* z-index: -1;  no need for z-index */
}

JsFiddle

Upvotes: 0

InCode
InCode

Reputation: 51

The image is not overtaking them but the <div> the image is sitting in is. It's full width so you have a transparent div sitting on top of your navbar. Limit the width of your logo container, use a span instead or float it as suggestions.

Upvotes: 2

Busch4Al
Busch4Al

Reputation: 53

Check that the z-index of the image is below the z-index of the links.

Upvotes: 1

Related Questions