There seems to be an issue with the navigation on the website. The problem occurs intermittently, either during the initial load or after the user has browsed a few pages. The content within the navigation doesn't align properly and shifts down by about 6-10px.
HTML
<div class="nav">
<ul>
<li><a href="./" class="brand">ESGator Hosting</a></li>
<span class="right">
<li><a href="plans.php">Plans</a></li>
<li><a href="minecraft.php">Minecraft</a></li>
<li><a href="about.php">About</a></li>
<li><a href="support.php">Support</a></li>
<li><a href="https://esgator.com/panel" class="button"><i class="icon-lock"></i> cPanel</a></li>
<li><a href="https://esgator.com/mail" class="button" style="margin-left:6px;"><i class="icon-envelope"></i> Mail</a></li>
<!-- not used <li><a href="feedback.php" class="button feedback" style="margin-left:6px;"><i class="icon-heart"></i></a></li> -->
</span>
</ul>
</div>
CSS
ul, ol, li {
font-size : 1em;
line-height : 1.6;
list-style : none;
}
.nav {
background : transparent;
width : 100%;
display : block;
position : fixed;
top : 0;
z-index : 100;
}
.add-bg {
background : #0a0a0a;
}
.static-bg {
background : #0a0a0a;
}
.nav ul {
width : auto;
max-width : 1024px;
min-width : 640px;
margin : 24px auto;
padding : 8px 0;
}
.nav li {
display : inline;
}
.nav a {
padding : 8px 0;
margin-left : 16px;
color : #7f848a;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
transition : all 400ms;
text-align : left;
}
.nav a:hover, .nav a:focus {
color : #ffffff;
transition : all 400ms;
}
.nav a.active {
color : #ffffff;
}
.nav, .right {
float : right;
}
.nav a.brand {
color : #ffffff;
font-size : 0.875em;
font-weight : 700;
text-transform : uppercase;
text-decoration : none;
margin-left : 0;
transition : all 400ms;
}
.nav a.brand:hover, .nav a.brand:focus {
color : #f14f4f;
transition : all 400ms;
}
.nav a.button {
padding : 8px 10px;
background : #5aac6a;
color : #ffffff;
border-radius : 3px;
border-bottom : 2px solid #5a8a53;
transition : all 400ms;
}
.nav a.button:hover {
background : #6ca04d;
border-bottom : 2px solid #618f44;
color : #ffffff;
transition : all 400ms;
}
.nav a.button.feedback {
color : #f14f4f;
background : #eeeeee;
border-bottom-color : #d4d4d4;
}
.nav a.button.feedback:hover {
color : #f14f4f;
background : #dce0df;
border-bottom-color : #c4c8c7;
transition : all 400ms;
}
For a live example of the issue with the broken navigation, you can visit esgator.com/mail