Search code examples
jqueryhtmlcssnavigationunsemantic-css

Unsemantic grid and a sticky navigation

I have a problem on my site with a sticky navigation menu. And I've based the site on Unsemantic.

https://dl.dropboxusercontent.com/u/7468425/acappella/site/index.html

As you see if you look att the site - the menu sticks to the top as you scroll by. But - and this is my problem - at the same time it gets wider. Instead of 100% width of the container it gets 100% width of the window.

I want it to keep the same width all the so that it smoothly justs keeps following.

Does anyone of you have any thoughts?

Solution

  • Then make it the width of the container. (a.k.a 1200px)

    .sticky {
    position: fixed;
    top: 0; 
    left:50%;
    margin: 0 0 0 -600px;
    width: 1200px;
}

    And when you reach 1200px use media queries:

    @media screen and (max-width: 1200px){
    .sticky {
        left:0;
        margin: 0;
        width: 100%;
    }
}

    That's all.