Geek Answers Handbook

Fixed navbar lags behind content

I have a fixed navigator here.

The problem is that when you scroll down, if you then hover over an item that is essentially located behind the navigation bar, it becomes ontop of the navigation bar?

Very strange?

Any tips?

CSS

html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #fff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } nav { background-color: #fff; height: 40px; position: fixed; top: 0; width: 100%; float: left; } nav .links { float: left; font-size: 13px; font-weight: 600; margin-top: 10px; } nav .links a { color: #000; text-decoration: none; margin-right: 10px; transition: .15s; } nav .links a:hover { opacity: 0.6; transition: .15s; } nav .name { float: right; margin-top: 10px; } nav .name a { color: #000; text-decoration: none; } nav .name a h2 { font-size: 14px; margin: 0; } .work { font-size: 0; padding-top: 40px; overflow: hidden; } .work img { max-width: 20%; transition: .15s; } .work img:hover { opacity: .8; transition: .15s; }

JSFiddle: http://jsfiddle.net/2c53e1eg/

+4
source share
2 answers

Add z-index: 9; in nav

 html, body { margin: 0; padding: 0; font-family: 'Open Sans', sans-serif; background-color: #fff; } .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; } nav { background-color: #fff; height: 40px; position: fixed; top: 0; width: 100%; float: left; z-index: 9; } nav .links { float: left; font-size: 13px; font-weight: 600; margin-top: 10px; } nav .links a { color: #000; text-decoration: none; margin-right: 10px; transition: .15s; } nav .links a:hover { opacity: 0.6; transition: .15s; } nav .name { float: right; margin-top: 10px; } nav .name a { color: #000; text-decoration: none; } nav .name a h2 { font-size: 14px; margin: 0; } .work { font-size: 0; padding-top: 40px; overflow: hidden; } .work img { max-width: 20%; transition: .15s; } .work img:hover { opacity: .8; transition: .15s; } 
 <nav> <div class="container"> <div class="links"> <a href="#">WORK</a> <a href="#">ABOUT</a> <a href="#">DRIBBBLE</a> <a href="#">BEHANCE</a> <a href="#">BLOG</a> <a href="#">CONTACT</a> </div> <div class="name"> <a href="#"><h2>Tom Walsh</h2></a> </div> </div> </nav> <div class="work"> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> <a href="#"> <img src="http://placehold.it/500x500"> </a> </div>
+3
source

Add this style

 .links{z-index:1}
+1
source

More articles:


All Articles