Всем привет. Есть сайт, у которого проблема с верхним меню. Последний пункт меню съезжает на вторую строчку. Как это устранить? В самом браузере у меня все получается, убираю margin-right: 7px;. Но когда прописываю в CSS, все остается, как было.
На моем мониторе (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, тогда проблема решиться сама собой.