Bootstrap Navbar поверх jumbotron (оверлей)

Я пытаюсь разместить свою панель навигации поверх крышки Jumbotron (я использую Bootstrap CSS), но мне просто не удается разместить ее (панель навигации) поверх Jumbotron с прозрачным фоном.

Помощь будет признательна :-)

Ниже приведен мой HTML-код:

<nav class = "navbar navbar-expand-md navbar-light">
<div class = "navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
    <ul class = "navbar-nav mr-auto">
        <li class = "nav-item active">
            <a class = "nav-link" href = "/home.php">Item 1</a></a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link" href = "">Item 2</a>
        </li>
    </ul>
</div>

<div class = "mx-auto order-0">
    <a class = "navbar-brand mx-auto" href = "/home.php">
      <img src = "/images/logo.svgs" height = "35" alt = "">Logo
    </a>
</div>

<div class = "navbar-collapse collapse w-100 order-3 dual-collapse2">
    <ul class = "navbar-nav ml-auto">
        <li class = "nav-item">
            <a class = "nav-link" href = "#">Page 1</a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link" href = "#">Page 2</a>
        </li>
        <li class = "nav-item">
            <a class = "nav-link" href = "#">Page 3</a>
        </li>
    </ul>
</div>
</nav>

<section class = "cover jumbotron jumbotron-fluid" id = "cover">
<div class = "container-fluid">
  <div class = "row">
    <div class = "cover-text col-5">
      <h1 class = "display-4">LOREM IPSUM TITLE</h1>
      <p class = "lead">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce
        convallis pellentesque metus id lacinia.
      </p>
    </div>

    <div class = "col-1">
    </div>

    <div class = "col-6">
      <div class = "card">
        <div class = "card-body">
          <h5 class = "card-title">Card title</h5>
          <h6 class = "card-subtitle mb-2 text-muted">Card subtitle</h6>
          <p class = "card-text">
            Some quick example text to build on the card title and make up
            the bulk of the card's content.
          </p>
          <a href = "#" class = "card-link">Card link</a>
        </div>
      </div>
    </div>
  </div>
</div>
</section>

и ниже показано, как это выглядит: Bootstrap Navbar поверх jumbotron (оверлей)

html css twitter-bootstrap bootstrap-4 navbar

10.04.2018 17:06

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

2 807

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

вы еще не закрыли свой навигационный раздел. Это может привести к нежелательным проблемам.

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

— 10.04.2018 17:12

10.04.2018 17:10

Ответ принят как подходящий

Используйте fixed-top Navbar как объяснено в документации ...

<nav class = "navbar navbar-expand-md navbar-light fixed-top">
    <div class = "navbar-collapse collapse w-100 order-1 order-md-0 dual-collapse2">
        <ul class = "navbar-nav mr-auto">
            <li class = "nav-item active">
                <a class = "nav-link" href = "/home.php">Item 1</a>
            </li>
            <li class = "nav-item">
                <a class = "nav-link" href = "">Item 2</a>
            </li>
        </ul>
    </div>

    <div class = "mx-auto order-0">
        <a class = "navbar-brand mx-auto" href = "/home.php">
            <img src = "/images/logo.svgs" height = "35" alt = "">Logo
        </a>
    </div>

    <div class = "navbar-collapse collapse w-100 order-3 dual-collapse2">
        <ul class = "navbar-nav ml-auto">
            <li class = "nav-item">
                <a class = "nav-link" href = "#">Page 1</a>
            </li>
            <li class = "nav-item">
                <a class = "nav-link" href = "#">Page 2</a>
            </li>
            <li class = "nav-item">
                <a class = "nav-link" href = "#">Page 3</a>
            </li>
        </ul>
    </div>
</nav>

<section class = "cover jumbotron jumbotron-fluid" id = "cover">
    <div class = "container-fluid">
        <div class = "row">
            <div class = "cover-text col-5">
                <h1 class = "display-4">LOREM IPSUM TITLE</h1>
                <p class = "lead">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce convallis pellentesque metus id lacinia.
                </p>
            </div>

            <div class = "col-1">
            </div>

            <div class = "col-6">
                <div class = "card">
                    <div class = "card-body">
                        <h5 class = "card-title">Card title</h5>
                        <h6 class = "card-subtitle mb-2 text-muted">Card subtitle</h6>
                        <p class = "card-text">
                            Some quick example text to build on the card title and make up the bulk of the card's content.
                        </p>
                        <a href = "#" class = "card-link">Card link</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

https://www.codeply.com/go/dGengaALpm

Сработало отлично. Большое спасибо :-)

— 10.04.2018 17:29

10.04.2018 17:27