Position Fixed Not Working for Header

css position css-position
Andrew picture Andrew · Feb 6, 2013 · Viewed 37.5k times · Source

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.

Answer

phihag picture phihag · Feb 6, 2013

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.

Related questions

Fixed position but relative to container

I am trying to fix a div so it always sticks to the top of the screen, using: position: fixed; top: 0px; right: 0px; However, the div is inside a centered container. When I use position:fixed it fixes the …

Read More
Remove position:absolute attribute by adding css

I have a html element with id="#item" I have a UI event that programaticaly alters the css for "#item" by adding the class ".new" to "#item". Initially I want "#item" to have "position:absolute". However once the class ".new" …

Read More
Is it possible to keep the width of the parent element when position: fixed is applied?

When we apply position:fixed to an element, it's taken out of the normal flow of the document, therefore it doesn't respect it's parent's element width. Are there ways to make it inherit it's parent's width if this is declared …

Read More