d4ngrs d4ngrs - 1 year ago 84
CSS Question

Prevent HTML/CSS-Navbar from changing height while using border-bottom

I got a little problem when using a

with a hover-effect on my navbar.

Is there any way to stop that? Or, lets say, give the Navbar the height it would actually by while hovering?

I would preffer a solution for not changing the height on hovering, but I'm open for anything.

Here is a JSFiddle of my Navbar: https://jsfiddle.net/ay3u7trd/


Answer Source

Add a default border bottom to all of them and make it the same color as the background.

a {
  color: #ff8800;
  border-bottom: 3px solid #333;

a:hover {
  color: #ff8800;
  text-decoration: none;
  border-bottom-color: #1290FF;

Updated demo

UPDATE – Don't forget to change the bottom border color on the active element

.active {
  border-bottom-color: #ff8800;

Or you make the default border color transparent (probably the better solution)

a {
  color: #ff8800;
  border-bottom: 3px solid rgba(0,0,0,0);
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download