Несемантическая сетка и липкая навигация

Question

У меня есть проблема на моем сайте с липким меню навигации. И я основал сайт на Unsemantic.

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

Как вы видите, если вы посмотрите на сайте - меню прилипает к верхней части при прокрутке. Но - и это моя проблема - в то же время она становится шире. Вместо 100% ширины контейнера он получает 100% ширину окна.

Я хочу, чтобы он сохранял одинаковую ширину, чтобы он плавно продолжал следовать.

У кого-нибудь из вас есть мысли?

Answer 1

Тогда сделайте это шириной контейнера. (он же 1200px)

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

И когда вы достигнете 1200px, используйте медиа-запросы:

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

Это все.