How to make menu fixed on left top corner, sloppy design?

Question

I want to make something like this ( http://www.awesomescreenshot.com/image/442354/edb8d5ee19e54e29b50ae2e14b1b9156 ) on my website ( http://motiongiraffx.com/ ).

Menu div have to be fixed on scroll and I tried this CSS

.menu-space {
    width: 100%;
    height: 5em;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 800;
    overflow: hidden;
    -o-transform: skewY(-10deg);
    transform: skewY(-10deg);
}
.menu-icon {
transform: skewY(10deg);
-webkit-transform: skewY(10deg);
    }

but menu won't go to top corner and I lose my menu icon with those styles.

This is my HTML:

<div class="menu-space">
            <span class="menu-icon" style="display: none;"><img src="http://motiongiraffx.com/wp-content/themes/motiongiraffx/images/menu-icon.png" id="nav-icon" onclick="changeImage()" alt="Menu icon"></span>
        </div>

I see that problem is with width: 100%, when I remove it I got menu-space in right corner but I want to cover all that space with white color. How can I make this work right?

Answer 1

may you should use possition:absolute; fixed will be always at your browser window