Как избежать сползание навигации при меньшем разрешении экрана?

Question

[mmka]

Какой бы фреймворк я не использовал, будь это bootstrap или foundation, то если в навигации более 4-5 элементов (без учета логотипа), при разрешении экрана менее 900 пикс и более 6 элементов (без учета логотипа) при разрешении 1100 пикс сползает навигация, логотип понятное дело остается на месте.
Скриншот прилагается:
habrastorage.org/storage3/243/95e/f30/24395ef309bb...

Как можно решить данную проблему?

Comments

[mmka]

лого достаточно маленькое и занимает 180 пикселей

Answer 1

[Юрий Лобанов]

А я у себя так и оставил, правда у меня верстка не едет, не наползает на карусель и так далее, а увеличивается в два раза вся панель навигации. Выглядит отлично, не нравится лишь тем, что при таком виде при загрузке страница много теряет в информативности, так как навигация крадет лишние 75 пикселей по высоте от остального контента, но учитывая, что данный случай будет редко - оставил как есть.
А что Вы сделаете? можете по минимуму сделать отступы кнопок навигации через медиа, но иногда это тоже не выход, так как тогда кнопки будут не отделимы друг от друга и смотрится это плохо.
Либо сократить кол-во пунктов меню, что тоже не всегда возможно.

Answer 2

[Krickt]

2 варианта при уменьшении размера экрана:
1) меню в 2 ряда
2) вместо всего меню одна кнопка со всплывающим меню, как здесь (the7.dream-demo.com).

Answer 3

[personaljs]

<div style="white-space:nowrap;">
     <div style="display:inline-block"> // див с лого
     <div style="display:inline-block"> // див с меню
</div>

без всяких float естественно