Как избежать скрытия элемента страницы за фиксированным элементом

Question

Я пытаюсь сделать фиксированную навигационную панель вверху сайта. Проблема заключается в следующем: если я использую свойство position: fixed; CSS, страница переходит под мою панель навигации, и я бы хотел, чтобы этого не произошло, вот весь код панели навигации:

nav a {
    list-style-type: none;
    text-decoration: none;
    color: #FFFFFF;
}

li {
    list-style-type: none;
}

@media screen and (min-width: 1200px) {
    nav li {
        margin-left: 15px;
    }

    nav li a {
        font-size: 20px;
    }

    .margin-left-50 {
        margin-left: 50px;
    }

    .nav-title {
        font-size: 35px;
    }

}

@media screen and (max-width: 1200px) {
    .margin-top-connect {
        margin-top: 5px;
    }
}

<script src="../cinefilms/sources/js/bootstrap.bundle.min.js"></script>
<script src="../cinefilms/sources/jquery.js"></script>

<nav class="navbar navbar-expand-xl navbar-dark fixed-top blacknavbar navbar-tunning">
    <a href="#" class="navbar-brand nav-title margin-right-title margin-left-50"><font color="#888888">Ciné</font><font color="red">Films</font></a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto">
            <li class="nav-item active">
                <a class="nav-link" href="../cinefilms/main.php">Accueil<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="../cinefilms/review_list.php">Toutes nos Reviews<span class="sr-only">(current)</span></a>
            </li>
            <li class="nav-item active">
                <a class="nav-link" href="#">Support<span class="sr-only">(current)</span></a>
            </li>
        </ul>
        <form class="form-inline my-2 my-lg-0">
            <input class="form-control mr-sm-2" type="search" placeholder="Rechercher" aria-label="Search">
            <button class="btn btn-outline-danger my-2 my-sm-0" type="submit">Rechercher</button>
        </form>
        <li>
            <button onclick=window.location.href="#" class="navbar-opt btn btn-outline-primary margin-top-connect">Connexion</button>
        </li>
        <div>
</nav>
<div class="header-casse"></div>

Обратите внимание, что я также использую функции Bootstrap, bootstrap JS и Jquery, чтобы свернуть панель навигации. Я включаю эту панель навигации на другой странице, и CSS вызываются на страницах тезисов. Вам не нужно обращать внимание на тот факт, что вы не видите звонок.

Я с нетерпением жду вашей помощи. Thx

Answer 1

Зависит от того, как вы хотите, чтобы навигационная панель работала при прокрутке пользователя.

Если вы хотите, чтобы навигационная панель всегда была видимой во время прокрутки, но не охватывала верхнюю часть страницы. тогда вам нужно просто добавить отступы вверху страницы, например, это высота панели навигации. тогда весь контент в теле будет виден, так как он будет опущен ниже панели навигации.

или

, если вы просто хотите, чтобы панель навигации находилась вверху страницы тогда вам не нужно делать никаких CSS (в зависимости от того, что там уже есть), просто реструктурируйте HTML так, чтобы панель навигации была перед остальным содержимым