Как разместить панель навигации ниже липкой панели навигации с помощью начальной загрузки 4? - PullRequest
Новая
       30

Как разместить панель навигации ниже липкой панели навигации с помощью начальной загрузки 4?

0 голосов
/ 23 октября 2018

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

Html:

Navbar 1: 

<nav class="navbar fixed-top navbar-expand-lg navbar-light bg-custom-light">
    <div class="container-fluid">
        <div class="row w-100">
            <div class="col-md-2 col-lg-2 col-sm-4 col-xs-4">
                <a class="navbar-brand" href="#">
                    New Project
                </a>
            </div>
            <div class="col-md-4 col-lg-4 col-sm-6 col-xs-6 d-none d-sm-none d-md-block mt-2">
                <h4 class="font-weight-600">
                    Little description
                </h4>
            </div>
            <div class="col-3"></div>
            <div class="col-3 mt-3 d-none d-sm-none d-md-block">
                <ul class="navbar-nav pl-5">
                    <li class="nav-item mr-3">
                        <a class="nav-link" href="#">
                            Notification
                        </a>
                    </li>
                    <li class="nav-item font-weight-600 mr-3">
                        <a class="nav-link text-capitalize" href="#">
                            Hello Admin
                        </a>
                    </li>
                    <li class="nav-item font-weight-600 mr-3">
                        <a class="nav-link text-capitalize mr-3" href="#">
                            Profile
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="#">
                                search
                        </a>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</nav>

Navbar 2: 

<nav class="navbar fixed-top navbar-expand-md bg-dark navbar-dark">
  <!-- Brand -->
  <a class="navbar-brand" href="#">Navbar</a>

  <!-- Toggler/collapsibe Button -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
    <span class="navbar-toggler-icon"></span>
  </button>

  <!-- Navbar links -->
  <div class="collapse navbar-collapse" id="collapsibleNavbar">
    <ul class="navbar-nav">
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li> 
    </ul>
  </div> 
</nav>

Здесь обе панели навигации должны быть зафиксированы сверху, для которого яиспользовали fixed-top class ..

Но на данный момент навигационные панели перекрывают друг друга.

Вы можете увидеть в ссылке https://www.bootply.com/y8EfMpCMc4#, где происходит перекрытие.

Пожалуйста, помогите мне разместить панель навигации 2 ниже панели навигации 1 с фиксированной позицией (которая также должна быть отзывчивой), при которой только панель навигации 2 должна быть свернута для небольших устройств и должна быть на правой стороне панели навигацииНавбренд 1, т. Е. Прямо на New Project.

1 Ответ

0 голосов
/ 23 октября 2018

Используйте sticky-top на 1-м вместо fixed-top, и сделайте 2-ю навигационную панель статической, удалив fixed-top. 

<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-custom-light"></nav>
<nav class="navbar navbar-expand-md bg-dark navbar-dark"></nav>

Демо: https://www.codeply.com/go/vbF0Sch9xc

Related:
Bootstrap 4 сворачивает две навигационные панели в одну кнопку переключения
Bootstrap 4 Несколько навигационных панелей с фиксированным верхом

...