Как сделать navbar выше header в bootstrap 4?

Question

[zakalindor]

Доброго времени суток, вопрос такой:
Учусь писать сайты с помощью bootstrap 4 и так выходит что navbar находится на header(залазит на картинку).
Если использовать позицию static или sticky то все прекрасно и замечательно и navbar встает выше header и есть отступ, но не скролится(в варианте sticky сперва скролится и пропадает на середине страницы), а мне нужен вариант позиции fixed в navbar, чтобы соответственно это все дело скролилось.

Пытался делать отступы padding, margrin, но все безуспешно.
Помогите пожалуйста разобраться новичку:)

Answer 1

[When you dont want to litter on stackoverflow]

Используй sticky-top. И сначала почитай как работает sticky, а потом задавай такие вопросы. Если задашь sticky-top, то при скролле он станет фиксированным.

Comments

[zakalindor]

Я пробовал, но суть в том, что оно фиксируется до конца header, а на странице после пропадает, на других секциях в смысле.

[When you dont want to litter on stackoverflow]

zakalindor, А теперь перефразируй пж

[zakalindor]

Сейчас попробую. Когда я поставил вместе Fixed-top, Sticky-top, само местоположения Navbar стало как надо, появились и отступы и он скролится фиксировано. Но фиксированая позиция держится до окончания Header. А на разделах section меню просто уходит вверх и даже если скрольнуть вверх, оно появляется только на header. Вот пример кода.

<nav class="navbar navbar-expand-lg navbar-light sticky-top py-3" id="mainNav">
            <div class="container">
                <a class="navbar-brand" href="#page-top">Логотип</a><button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
                <div class="collapse navbar-collapse" id="navbarResponsive">
                    <ul class="navbar-nav ml-auto my-2 my-lg-0">
                        <li class="nav-item"><a class="nav-link" href="#">Заголовок</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Работы</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Блог</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Новости</a></li>
                        <li class="nav-item"><a class="nav-link" href="#">Контакты</a></li>
                    </ul>
                    <ul class="navbar-nav ml-auto my-2 my-lg-0">
                        <li class="nav-item"><a class="btn btn-primary btn-xl" href="#about">Форма Связи</a></li>
                    </ul>
                </div>
            </div>
        </nav>
<header class="banner_part">
        <div class="container">
            <div class="row align-items-center">
                <div class="col-lg-6 col-xl-6">
                    <div class="banner_text">
                        <div class="banner_text_iner">
                            <h1>Заголовок h1 и текст</h1>
                            <p>Описание.</p>
                            <a class="btn btn-primary btn-xl" href="#about">Портфолио</a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</header>

        <section class="page-section" id="services">
            <div class="container">
                <h2 class="text-center mt-0">Услуги и прочее</h2>
                <hr class="divider my-4" />
                <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-gem text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-globe text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-heart text-primary mb-4"></i>
                           <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="page-section" id="services">
            <div class="container">
                <h2 class="text-center mt-0">Услуги и прочее</h2>
                <hr class="divider my-4" />
                <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-gem text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-globe text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-heart text-primary mb-4"></i>
                           <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>
        <section class="page-section" id="services">
            <div class="container">
                <h2 class="text-center mt-0">Услуги и прочее</h2>
                <hr class="divider my-4" />
                <div class="row">
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-gem text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-laptop-code text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-globe text-primary mb-4"></i>
                            <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                    <div class="col-lg-3 col-md-6 text-center">
                        <div class="mt-5">
                            <i class="fas fa-4x fa-heart text-primary mb-4"></i>
                           <h3 class="h4 mb-2">Заголовок</h3>
                            <p class="text-muted mb-0">Описание и так далее</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

[zakalindor]

В общем я разобрался, по сути надо было добавить main после body и sticky-top заработало как надо. благодарю за помощь.

[When you dont want to litter on stackoverflow]

zakalindor, Рад помочь, удачи!