Всем привет. Есть сайт, у которого проблема с верхним меню. Последний пункт меню съезжает на вторую строчку. Как это устранить? В самом браузере у меня все получается, убираю margin-right: 7px;
. Но когда прописываю в CSS, все остается, как было.
2 ответа
На моем мониторе (1024px) вниз уходят два пункта меню.
Если надо, чтобы они всегда были в ряд, то:
<ul>
<li></li>
</ul>
ul {
white-space: nowrap;
}
li {
display: inline-block;
}
Но тогда полоса прокрутки будет появляться.
Здесь есть несколько вариантов решения в зависимости от Вашего дизайна:
1. Самый простой - при уменьшении ширины экрана выравниваете меню в два ряда по центру страницы. Это просто, но некрасиво.
2. Делаете видимый сайдбар (справа или слева контента) с пунктами меню, которые не помещаются в основное меню.
3. Самый модный вариант - делаете off-canvas меню.
Любой вариант годиться, лишь бы не так, как сейчас, - на мобильной версии по клику выпадает меню для широкоэкранных мониторов, гле пункты выравниваются горизонтально.
Еще проще - прикрутите Fixed to top navbar Bootstrap.
Можно отвоевать ширину меню еще несколькими способами:
- уменьшить шрифт (он очень крупный);
- "задать вопрос специалисту" - убрать в плавающую панель сбоку от страницы (так обычно делается) или прижать к низу;
- контакты можно поместить в футер.
Здесь можно посмотреть на живом примере. Правда, они схитрили немножко - на определенном промежутке оставили горизонтальную прокрутку.
Есть одна такая фишка, которая дает свойству наивысший приоритет.
Например, margin-right: 7px !important;
.
Рекомендовано не злоупотреблять.
А вообще в вашей ситуации я бы предпочел уменшить padding по селектору a
, тогда проблема решиться сама собой.
-
-
Не только справа. В целом. И у вас текст на кнопке при уменшение окна браузера выпадает. Попробуйте navbar-nav > li > a {width:100% } 21 дек 2014 в 14:28
-
@matthale_ua пробую, но ничего не меняется, даже с использованием !important. Как узнать, какое правило перекрывает?– spoilt21 дек 2014 в 15:26
-
Я пользуюсь DevTools в Chrome (Ctrl+Shift+I). Можно Firebug'ом в Firefox. Можно ПКМ по кнопке, и там выбрать "проверить элемент". Справа в окошке будут стили, и путь к файлам, в которых они прописаны. 21 дек 2014 в 15:34