当前位置: 动力学知识库 > 问答 > 编程问答 >

html - Links getting pushed out of navigation bar

问题描述:

I'm having a problem where the top two links in my navigation bar appear to get pushed down and out of place. Strangely, this only seems to happen about 10-20% of the time I load the page, and I can't seem to duplicate the problem using jsfiddle. Here's a link to a screenshot of what it looks like when it happens on the homepage: http://postimg.org/image/6ze6aqhrz/

And here's a fiddle of one of the pages where I added the .white class to the navigation bar, which is the most recent change I made:

http://jsfiddle.net/justaflurg/g8c4z07m/

My navigation html:

<!--NAVIGATION-->

<div class='navbar white'>

<a href='index.html'><h1 id='namelogo'>Lorem Ipsum</h1></a>

<div id='navcontainer'>

<ul id='nav'>

<li><a href='#portfolio'>Lorem</a></li>

<li><a href='#contact'>Ipsum</a></li>

</ul>

</div>

</div><!--Navbar-->

My navigation css:

/* 7. NAVIGATION ------------------------------------------*/

.navbar {

position: fixed;

top: 0;

left: 0;

z-index: 9999;

width: 100%;

height: 50px;

background-color: rgba(255,255,255,0.0);

transition: all 0.25s ease;

}

.white {

background-color: #fff;

border-bottom: solid 1px #eee;

}

.navbar.past-header {background-color: rgba(255,255,255,1.0); color: #222;}

#namelogo {

display: inline-block;

margin: 16px 0px 0px 30px;

text-transform: uppercase;

color: #777;

font-family: 'Nunito', 'Gill Sans', 'Gill Sans MT', 'Myriad Pro', Helvetica, Arial, sans-serif;

font-weight: 700;

font-size: 1em;

letter-spacing: 0.01em;

}

#namelogo:hover {color: #999;}

div#navcontainer {

float: right;

display: inline-block;

margin: 15px 30px 0px 0px;

}

ul#nav {

display: inline-block;

list-style: none;

margin: 0;

padding: 0;

text-align: right;

}

ul#nav li {

margin: 0;

padding: 0;

display: inline;

}

ul#nav a {

margin-left: 25px;

padding: 0;

color: #47E2CA;

font-size: 0.90em;

font-weight: 600;

letter-spacing: 0.035em;

text-transform: uppercase;

font-family: 'Source Sans Pro', 'Myriad Pro', 'Trebuchet MS', Verdana, sans-serif;

}

#nav a:hover {color: #64F0D4;}

分享给朋友:
您可能感兴趣的文章:
随机阅读: