CODEWITHSUNDEEP
htmlcss
Rvervuurt
Rvervuurt

Reputation: 8963

Remove overflowing clickable area

I have a navbar with a certain height and a logo that overflows. This logo is, of course, clickable, but it means that the part that overflows, is also clickable.

Is it possible to make the logo overflow, but not the clickable area?

HTML

<nav>
  <a href="#">
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
    </div>
  </a>
</nav>

CSS

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}

JSFIDDLE

Upvotes: 2

Views: 429

Answers (5)

stackunderflow
stackunderflow

Reputation: 202

What about something like this?

HTML

<a href="#">
  <div class="clear">
</div>
</a>
<nav>
  <div class="logo">
    <img src="http://i.imgur.com/h4bUdrZ.png" />
  </div>
</nav>

CSS

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 
.clear {
  height: 100px;
  background: 0;
  position: absolute;
  width: 100%;
  z-index: 2;
}

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}

Upvotes: 0

beerwin
beerwin

Reputation: 10327

Don't place the whole div inside the a.

Place the link after the image, give it absolute positioning and carefully set the position and size.

The other answers make the whole header clickable. If it is not desired, use this solution. You may have to adjust the width of the clickable area.

See the example below:

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}

a.clickable-logo {
  position: absolute;
  display: inline-block;
  left: 36px;
  top: 36px;
  width: 600px;
  height: 100px;
}
<nav>
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
      <a href="#" class="clickable-logo">
      </a>
    </div>
</nav>

Upvotes: 0

Gaurav Aggarwal
Gaurav Aggarwal

Reputation: 10177

Change little bit of you structure.

Put <a> independent and pass link in it with following css.

HTML

<nav>
  <a href="#"></a>
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
    </div>  
</nav>

CSS

body, html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
} 
nav a{
  position: relative;
    display: block;
    height: 100%;
    z-index: 1;
} 

.logo {
  position: absolute;
    top: -36px;
    left: -39px;
}

Example : https://jsfiddle.net/67s4ajqf/3/

Upvotes: 0

Justinas
Justinas

Reputation: 43451

Just move logo outside of your link and put that link on rest of header:

body,
html {
  padding: 0;
  margin: 0;
}
nav {
  height: 100px;
  background: blue;
  position: relative;
}
.logo {
  position: absolute;
  top: -36px;
  left: -39px;
}
a {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: inline-block;
}
<nav>
  <a href="#">
  </a>

  <div class="logo">
    <img src="http://i.imgur.com/h4bUdrZ.png" />
  </div>
</nav>

Upvotes: 0

NiZa
NiZa

Reputation: 3926

Something like this?

body,
html {
  padding: 0;
  margin: 0;
}

nav {
  height: 100px;
  background: blue;
  position: relative;
}

a {
  display: inline-block;
  height: 100%;
  width: 100%;
}

.logo {
  position: absolute;
  top: -36px;
  left: -39px;
  pointer-events: none;
}
<nav>
  <a href="#">
    <div class="logo">
      <img src="http://i.imgur.com/h4bUdrZ.png" />
    </div>
  </a>
</nav>

Upvotes: 3

Related Questions