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

Question

I got a little problem when using a border-bottomwith 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/
Thanks!

Answer 1

Add border-bottom: 3px solid RGBA(0,0,0,0); to your a { }. This will add the 3px padding to all of your hyperlinks without applying a specific color (the background color native to the object will appear).
Then once the :hover effect takes place it just shows up right there, since the border is already present you have no weird height issues.
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #121214;
z-index: 10;
text-transform: uppercase;
}
li {
float: left;
border-right: 1px solid #121214;
text-decoration: none;
}
a {
color: #ff8800;
border-bottom: 3px solid RGBA(0,0,0,0);
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8800;
text-decoration: none;
color: #121214;
transition: background 0.3s ease-in;
}
.active {
background-color: #ff8800;
color: #121214;
text-decoration: none;
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>

Answer 2

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);
}

Answer 3

The right answer depends on the UX you want to achieve. The easiest way would be to move the border to the <a> element (or to move the hover to the <li> element). And use a 3px border in all cases-- black for non-hovered, blue for hovered.
Like this: https://jsfiddle.net/sh5a8v6y/
<ul>
<li><a class="active" href="#home">Home</a></li>
<li>News</li>
<li>Contact</li>
<li>About</li>
</ul>
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
z-index: 10;
text-transform: uppercase;
}
li {
float: left;
border-right: 1px solid #121214;
text-decoration: none;
}
a {
color: #ff8800;
border-bottom: 3px solid #121214;
}
a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
}
li a {
display: block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li a:hover {
background-color: #ff8800;
text-decoration: none;
color: #121214;
transition: background 0.3s ease-in;
}
.active {
background-color: #ff8800;
color: #121214;
text-decoration: none;
}

Answer 4

a:hover {
color: #ff8800;
text-decoration: none;
border-bottom: 3px solid #1290FF;
padding-bottom:11px;
}
Fiddle

Answer 5

One simple approach is to change the ul properties as follows:
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: visible;
background-color: #333;
position: fixed;
top: 0;
width: 100%;
border-bottom: 1px solid #121214;
z-index: 10;
text-transform: uppercase;
height: 48px;
}