Menu
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.
867
Position fixed doesn't work with transform CSS property. It happens because transform creates a new coordinate system and your position: fixed element becomes fixed to that transformed element. To fix the problem you can remove transform CSS property from the parent element.
Answer: Use CSS fixed positioning You can easily create sticky or fixed header and footer using the CSS fixed positioning. Simply apply the CSS position property with the value fixed in combination with the top and bottom property to place the element on the top or bottom of the viewport accordingly.
To create a fixed top menu, use position:fixed and top:0 .
To fix the position of the header in the webpage, use position: fixed, and to fix it at top use to top:0. The fixed-top can overlay other elements. So to avoid it add margin-top to the other contents.
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.
137
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
