White box within banner image - html

Question

I am trying to add a border-top with 2px on my fixed navbar however on the a href hover it pushes all of the nav items down by 2px, I am trying to make it so it's static, any help is appreciated.
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
overflow: hidden;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
overflow: hidden;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
}
.menu-items { display: inline-block; }
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>

Answer 1

It's because of no border. Either give a transparent border with the same width or use the colour of the border. But in your case, it's screwed up. So I changed the overflow: hidden and used margin-top: -2px:
.fixed-nav-bar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 9999;
width: 100%;
height: 70px;
background-color: #3f3f3f;
}
.fixed-nav-bar li, .fixed-nav-bar a {
height: 0 auto;
line-height: 50px;
width: 100px;
}
.menu {
width: 90%;
max-width: 960px;
margin: 0 auto;
text-align: center;
}
.menu a, .menu a:visited {
color: #ffffff;
}
.menu a:hover, .menu a:target {
display: block;
border-top: 2px solid #72BCD4;
color: #72BCD4;
margin-top: -2px;
}
.menu-items {
display: inline-block;
}
.menu-items li {
display: inline-block;
margin-right: 10px;
margin-left: 10px;
}
.menu-items a {
text-decoration: none;
}
.show, .hide {
display: none;
padding-left: 15px;
background-color: transparent;
background-repeat: no-repeat;
background-position: center left;
color: #dde1e2;
}
.show {
background-image: url(../assets/down-arrow-icon.png);
}
.hide {
background-image: url(../assets/up-arrow-icon.png);
}
<nav class="fixed-nav-bar">
<div id="menu" class="menu">
<!-- Example responsive navigation menu -->
<a class="show" href="#menu">Menu</a><a class="hide" href="#hidemenu">Menu</a>
<ul class="menu-items">
<li>HOME</li>
<li>ABOUT</li>
<li>DESIGNS</li>
<li>CONTACT</li>
</ul>
</div>
</nav>

Answer 2

That's all because of box-sizing property. by default it adds value of paddings/margins/borders outside of content area, so element becomes bigger. Just define globally * {box-sizing: border-box;} it will make elements to fixed sizes. That means if element had no border, and then it adds, the element's area for content will be smaller, but the whole size will be the same. However, I strongly recommend you to use border at the beginning, otherwise, it will jump inside the element. You can set the color 'transparent' and it won't be visible. Then just by changing border-color it will be nicer.

Answer 3

I have created a little fiddler:
https://jsfiddle.net/marco_rensch/0hva2241/
this could be a possible solution
checkout CSS Code Changes between row 31 and 51
the key is to add a default border 2px transparent to the li's and change it by hover:
.menu-items li:hover{border-top: 2px solid #72BCD4;}