0

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

2 ответа 2

2

На моем мониторе (1024px) вниз уходят два пункта меню.
Если надо, чтобы они всегда были в ряд, то:

<ul>
<li></li>
</ul>

ul {
white-space: nowrap;
}

li {
display: inline-block;
}

Но тогда полоса прокрутки будет появляться.

Здесь есть несколько вариантов решения в зависимости от Вашего дизайна:
1. Самый простой - при уменьшении ширины экрана выравниваете меню в два ряда по центру страницы. Это просто, но некрасиво.
2. Делаете видимый сайдбар (справа или слева контента) с пунктами меню, которые не помещаются в основное меню.
3. Самый модный вариант - делаете off-canvas меню.

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

Еще проще - прикрутите Fixed to top navbar Bootstrap.

Можно отвоевать ширину меню еще несколькими способами:
- уменьшить шрифт (он очень крупный); - "задать вопрос специалисту" - убрать в плавающую панель сбоку от страницы (так обычно делается) или прижать к низу; - контакты можно поместить в футер.

Здесь можно посмотреть на живом примере. Правда, они схитрили немножко - на определенном промежутке оставили горизонтальную прокрутку.

2
  • @Olga Moscow а как сделать так, чтобы меню оставалось адаптивным?
    – spoilt
    19 дек 2014 в 21:39
  • отредактировала ответ 19 дек 2014 в 21:50
1

Есть одна такая фишка, которая дает свойству наивысший приоритет. Например, margin-right: 7px !important;.
Рекомендовано не злоупотреблять. А вообще в вашей ситуации я бы предпочел уменшить padding по селектору a, тогда проблема решиться сама собой.

4
  • @matthale_ua То есть у всех ссылок меню убрать правый padding?
    – spoilt
    20 дек 2014 в 16:51
  • Не только справа. В целом. И у вас текст на кнопке при уменшение окна браузера выпадает. Попробуйте navbar-nav > li > a {width:100% }
    – Matt Hale
    21 дек 2014 в 14:28
  • @matthale_ua пробую, но ничего не меняется, даже с использованием !important. Как узнать, какое правило перекрывает?
    – spoilt
    21 дек 2014 в 15:26
  • Я пользуюсь DevTools в Chrome (Ctrl+Shift+I). Можно Firebug'ом в Firefox. Можно ПКМ по кнопке, и там выбрать "проверить элемент". Справа в окошке будут стили, и путь к файлам, в которых они прописаны.
    – Matt Hale
    21 дек 2014 в 15:34

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.