Блог

Главная - Вопросы по программированию - Строка перед навигационной панелью не отображается в html начальной загрузки

Строка перед навигационной панелью не отображается в html начальной загрузки

#html #bootstrap-4

Вопрос:

Я пытаюсь добавить строку перед навигационной панелью, но после добавления строки она не видна , а строки закрыты навигационной панелью. Как я могу показать строку перед навигационной панелью

 <header id="header">
    <div class=row>
        The text is not visible here
    </div>
        <nav class="navbar  navbar-expand-sm navbar-toggleable-sm navbar-dark bg-dark-header fixed-top" id="main-nav">
            <div class="w-100 d-flex">
        <a class="navbar-brand mx-md-auto" href="#">
            <img src="img/logo.png" alt="Logo" height="80px" width="auto">
        </a>
        <button class="navbar-toggler ml-auto" type="button" data-toggle="collapse" data-target=".navbar-collapse">
            <span class="navbar-toggler-icon"></span>
        </button>
    </div>
            <div class="container">
                <img src="img/Logo.png" class="img-responsive" alt="" style="width:250px;">
                <a class="navbar-brand" href="/">MyCompany</a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse">
                    <ul class="navbar-nav ml-auto">
                        <li class="nav-item active">
                            <a class="nav-link" href="/">Home</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/Home/Privacy">About Us</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/Home/Privacy">Our Project</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="/Home/Privacy">Contact</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
    </header>

Ответ №1:

 <div class="text-light" style="position: fixed;">
        The text is not visible here
</div>

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

Ответ №2:

Класс fixed-top добавляется к nav element тому, который прикрепляет навигацию вверху и скрывает указанный выше .row элемент.

  1. Вы можете либо удалить fixed-top класс из навигации, если вам не нужна верхняя фиксированная навигация
  2. Добавьте .row element внутреннюю навигацию, которая исправит строку в верхней части навигации

Комментарии:

1. Пожалуйста, не могли бы вы привести мне пример

Метки: