CODEWITHSUNDEEP
htmlcssnavigationhoverborder
Artsen
Artsen

Reputation: 188

Border-bottom issue (expanding downwards on hover)

I'm working on a navigation, and I can't seem to figure out how to make the bottom border increase in size upwards, instead of expanding downwards (which in turn extends my header a few pixels), I could fix the extending header with setting a height, but the the border will still extend downwards instead of upwards.

The CSS:

header {
  margin: 0;
  padding: 0;
  left: 0;
  top: 0;
  width: 100%;
  position: absolute;
  background: #000000;
}
ul {
  list-style-type: none;
  display: block;
  margin: 0 0 0 20px;
  padding: 0;
}
ul li {
  display: inline-block;
  padding: 0;
}
ul li a{
  display: block;
  border-bottom: 1px solid #fff;
  font-size: 19px;
}
ul li a:hover{
  border-bottom: 2px solid #fff;
  background: #333;
  font-size: 19px;
}

The HTML:

<header>
  <ul id="nav">
    <li><a href="">link 1</a></li>
    <li><a href="">link 2</a></li>
    <li><a href="">link 3</a></li>
  </ul>
</header>

The JSFiddle:

http://jsfiddle.net/Artsen/EZWvF/

Upvotes: 0

Views: 3625

Answers (2)

ambidexterous
ambidexterous

Reputation: 863

As Tyblitz suggested using extra padding value on :hover works great when you don't need a transition.

If you need transition and don't want to introduce an extra div you can do it using the line-height/height approach for controlling the vertical height.

so instead of doing this:

.nav-element a {
  color: gray;
  padding: 25px 15px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

do this:

.nav-element a {
  color: gray;
  padding: 0 15px;
  line-height: 70px;
  height: 70px;
  transition: all ease-in-out 0.2s;
  display: block;
  text-decoration: none;
}

See example where it doesn't work here and does work (using the line-height/height) here

Upvotes: 0

webketje
webketje

Reputation: 10966

So you want to increase the border-bottom to the top, right?

I've actually had to do this for a website recently. There is no other way than to set specific padding, and border properties.

I edited your jsfiddle here: http://jsfiddle.net/EZWvF/2/ (changed some properties to make the test case more visible)

The principle is: Swap the pixel values from padding-bottom and border-bottom on hover. These are the key lines to your solution:

ul li a {
 border-bottom: 1px solid white;
 padding-bottom: 5px;
}
ul li a:hover {
 border-bottom: 5px solid white;
 padding-bottom: 1px;
}

Note: This only works if you don't add a css-transition. If you unquote the css-transition I put in the fiddle, you'll see that the div still expands to the bottom. If you want a ss-transition you'll need to add a separate div to the li's to mimic a border.

Upvotes: 4

Related Questions