1

Помогите понять, почему блок наезжает на заголовок H1.

Сайт сверстан на Bootstrap 3. Тут на всю ширину:

Скриншот 1

Уменьшаем ширину, тут нормально:

Скриншот 2

Верхнее меню перескочило, так и должно быть:

Скриншот 3

Верхнее меню "схлопнулось", так и должно быть:

Скриншот 4

А вот такого быть не должно. Верхний белый блок должен стать больше по высоте и черное меню должно оказаться ниже, чтобы синий заголовок не перекрывался:

Скриншот 5

Еще хуже:

Скриншот 6

При раскрытии верхнего меню оно перекрывается синим заголовком:

Скриншот 7

Скажите, почему верхний белый блок остался по высоте тем же что и раньше и что сделать, чтобы он увеличился на высоту синего заголовка и чтобы заголовок ничего не перекрывал?

Вот здесь выложил: http://xenglish.ru/bootstrap/

3 ответа 3

0

У лого и заголовка стоит ограничение по высоте. Попробуйте перекрыть его вот так:

.navbar-brand {
  height: auto;
}

На моём экране после этого всё встало на свои места - и заголовок из под лого выбрался, и высота блока увеличилась.

3
  • @Stanislav Khatsko Вот, проверьте пожалуйста. glebkema.ru/tasks/so-ru-518475 Commented 29 апр. 2016 в 8:55
  • То, что нужно! Спасибо. Commented 29 апр. 2016 в 9:06
  • У меня пока недостаточно рейтинга чтобы принять ваш ответ как лучший. Commented 29 апр. 2016 в 9:30
0

css - @media изучите, там где сужения экрана происходит, там и меняйте размеры текста и т.д. и т.п.

0

Такое происходит потому что bootstrap использует фиксированную высоту заголовка. Не используйте bootstrap для верстки заголовков, если не нравится такое поведение.

3
  • Нужно было всего лишь переопределить .navbar-brand и выставить height: auto; Commented 30 апр. 2016 в 13:29
  • @StanislavKhatsko там потом другие глюки вылезут... Commented 30 апр. 2016 в 13:29
  • Например какие? Commented 1 мая 2016 в 13:52

Ваш ответ

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

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