How to make the Navigation bar not move when window scrolled down CSS?

Question

On my website, i got the background image to stay always centered and the navigation to always stay on the same spot horizontally, so it does not matter the HORIZONTAL size, it's always on the same spot i did that by using:

#nav {
    list-style: none;
    position:fixed;
    right:50%;
    margin-right:155px;
    margin-top:220px;
 }

My issue is with the VERTICAL part. When the Window is small vertically and it gets scrolled down, the menu moves with the page, an i don't want that. I wanted to make it stay up there with the logo, but using a percentage for "top" doesn't seem to work. I am not very familiar with javascript so if it could be don with CSS, it would be easier for me to understand!

HEEELP!

here is my example!

jsfiddle.net

Answer 1

Change your nav class to:

#nav {
    list-style: none;
    position:absolute;
    right:50%;
    margin-right:155px;
    margin-top:220px;
}