Search code examples
csspositioncss-position

Position Fixed Not Working for Header

I am trying to create a very simple effect where the navigation sticks to the top of the page as you scroll down the page. All I should have to do is set "position: fixed" to the header, which I currently have. For some reason, it's treating it more like a "position: absolute" element vs. fixed. I tried it on other elements on the page with the same effect, so I must have something that in my HTML or CSS code that is causing the issue. Any ideas?

http://jsfiddle.net/apautler/yDhXG/1/embedded/result/

Header CSS

.nav-main  {overflow: visible; position: fixed;
            top: 0; left: 0; right: 0; height: 60px; width: 100%;}

Note, the site is responsive, so the position: fixed kicks in at 768px.

Solution

  • At the moment, Chrome cannot render position:fixed on elements under a transformation. Delete the (content-free)

    -webkit-transform: translate3d(0, 0, 0);

    and it will work.