"position:fixed" Not Working For Header Menu

Question

No matter what, the header menu will not stick to the top of the screen.

I have a suspicion it may be something to do with the surrounding html structure - it's quite complex due to a mobile menu (resize to activate)

position: fixed;
top: 0;
left: 0;

****link removed****

Any ideas? Thanks

Answer 1

This is because the transform creates a new local coordinate system - http://www.w3.org/TR/css3-2d-transforms/#transform-rendering

Here's a look here

body {
    background-color: #1B725F;
    color: #333;
    /*font-family: "brandon-grotesque", "adelle", "Times New Roman", sans-serif;*/
    font-family: "brandon-grotesque", "adelle", sans-serif;
    font-size: 18px;
    font-weight: 100;
    font-style: normal;
    line-height: 1.625;
    position: relative;
    -webkit-transform: translate3d(0,0,0); <-- here
    transform: translate3d(0,0,0);         <-- here
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}