Fixed navbar наезжает на контент?

Question

Михаил @mk3mk

занимаюсь вёрсткой (иногда)

Fixed navbar наезжает на контент?

Товарищи! Подскажите кто знает ! Верстаю на Бутстрапе страницу. Наверху должен быть Зафиксированный Навбар с кнопками - якорями. При нажатии на кнопку, контент заезжает под навбар, скрывается под ним. Контент поднимается прямо к самому верху страницы. А надо, чтобы он поднимался чуть ниже навбара. Я навбару присвоил нижний маржин 75px , при этом при загрузке страницы все выглядит нормально. Но после нажатия на кнопку все оказывается под навбаром. Что-то не так делаю. Что - не пойму...

тут пример :
https://codepen.io/mk3mk/pen/KLWpbK

А еще , когда страницу сужаю, кнопки убираются и появляется гамбургер. А при нажатии на гамбургер, меню выезжает, но контент вниз не сдвигается. А как сделать, чтобы сдвигался вниз ?

Вопрос задан более трёх лет назад
1691 просмотр

3 комментария

Подписаться 1 Простой 3 комментария

Сергей delphinpro @delphinpro Куратор тега CSS

https://codepen.io/anon/pen/QRpBay

Написано более трёх лет назад
Михаил @mk3mk Автор вопроса

Сергей delphinpro, здорово! спасибо! а еще чтобы при раскрытии гамбургера, когда меню вниз выезжает, чтобы оно отодвигало контент вниз , можно сделать ? а то получается при узком экране, гамбургер раскрывается, появляется меню, а контент опять-таки под него лезет

Написано более трёх лет назад
Сергей delphinpro @delphinpro Куратор тега CSS

Михаил, на мобиле лучше после клика перематывать страницу и тут же закрыть меню. Когда у вас будет с десяток пунктов, они могут не поместится на экран телефона.

Написано более трёх лет назад

Пригласить эксперта

Ответы на вопрос 3

Комментировать

1 комментарий

Lenny_LEMON @Lenny_LEMON

<div class="container my-5">
    <div class="row">
        <div class="col-12">
            <h2 class="text-center text-withe">...</h2>
        </div>
    </div>
</div>

я просто в контент после navbar добавил my-5 в контейнер

Написано 29 нояб. 2023

Комментировать

Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации

Похожие вопросы

HTML

+1 ещё

Средний
Как в файле svg заставить работать события?
- 1 подписчик
- 2 часа назад
- 54 просмотра
1

ответ
CSS

Средний
Почему у элемента такое поведение?
- 3 подписчика
- 12 часов назад
- 995 просмотров
0

ответов
CSS

Простой
Почему не работает transition свойство в scss файле через webpack?
- 1 подписчик
- 15 часов назад
- 54 просмотра
2

ответа
HTML

+1 ещё

Простой
Почему верхние и нижние внешние отступы пустого блока не схлопываются?
- 1 подписчик
- 18 часов назад
- 123 просмотра
4

ответа
CSS

Простой
Почему нет задержки между повторами анимации?
- 1 подписчик
- 19 часов назад
- 55 просмотров
1

ответ
HTML

+1 ещё

Простой
Почему пустой div смещается, если ему задать margin-bottom?
- 1 подписчик
- 19 часов назад
- 111 просмотров
0

ответов
CSS

Простой
Почему не сужается flex-элемент с flex-shrink: 1?
- 1 подписчик
- 20 часов назад
- 76 просмотров
0

ответов
CSS

+1 ещё

Средний
При сборке webpack картинки из css не открываются?
- 1 подписчик
- вчера
- 81 просмотр
1

ответ
JavaScript

+2 ещё

Простой
Как сделать появление баннера от определенной высоты?
- 3 подписчика
- вчера
- 569 просмотров
1

ответ
HTML

+1 ещё

Простой
Как сделать, что бы кнопка при ховере увеличивала ширину?
- 1 подписчик
- вчера
- 91 просмотр
1

ответ
Показать ещё Загружается…

JavaScript разработчик

вАйТи

от 5 000 до 25 000 ₽

Frontend React

Glob-com

от 100 000 ₽

Trainee - IT Support

move2usajobs.com LLC • Лос-Анджелес

от 2 000 до 4 000 $

В wordpress подключить модуль по рассрочке (документацию дам)

23 апр. 2024, в 12:39

4000 руб./за проект

Обновить SSL-сертификаты на 2х серверах с openVPN

23 апр. 2024, в 12:18

600 руб./за проект

Верстка сайта

23 апр. 2024, в 11:46

3000 руб./за проект

Сергей delphinpro, здорово! спасибо! а еще чтобы при раскрытии гамбургера, когда меню вниз выезжает, чтобы оно отодвигало контент вниз , можно сделать ? а то получается при узком экране, гамбургер раскрывается, появляется меню, а контент опять-таки под него лезет
Михаил, на мобиле лучше после клика перематывать страницу и тут же закрыть меню. Когда у вас будет с десяток пунктов, они могут не поместится на экран телефона.

Answer 1 · 2019-05-15 21:52:07

сделайте margin-top контенту а не margin-bottom навбару
если навбар фиксированый то он и контент в разных потоках вывода

Answer 2 · 2019-05-16 00:02:30

нет. не то. поставил margin-top контенту. Всё равно залезает под навбар. оно в начале вроде нормально, а после нажатия на кнопки опять все под навбар . надо что-то другое.

Answer 3 · 2019-05-16 04:23:51

Самый простой хак, это вешать якорь в конец контент блока который выше. Других вариантов не упомню. И обязательно блокам присваивать margin-top и bottom 25px;

Fixed navbar наезжает на контент?

Войдите, чтобы написать ответ

Минуточку внимания

Войдите на сайт