unwanted nav that is at the top of the page

Question

I may have a strange problem because I usually want nav to be constantly at the top of the page but I do not want to. I want the user to go downstairs and my nav disappeared

li
{
   display:block;
   float: left;
}

nav li {
    width: 40px;
    height: 35px;
    text-align: center;
    position: relative;
    transition: 0.3s;
    margin: 3rem;
}

nav li::before,
nav li::after {
    content: '';
    position: absolute;
    width: inherit;
    height: inherit;
    top: 0;
    left: 0;
    transition: 0.3s;
}

http://jsfiddle.net/KubaPilat/jrnc5web/

Answer 1

The position cannot be fixed in the class "social", just remove it and make the nav have the 100% of the width