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

Question

[Михаил]

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

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

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

Comments

[Сергей delphinpro]

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

[Михаил]

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

[Сергей delphinpro]

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

Answer 1

[Леонид]

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

Answer 2

[Михаил]

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

Comments

[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 в контейнер

Answer 3

[Alfieros]

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