Положение: после и: перед позади начальной загрузки

Question

Я пытаюсь применить эффект ленты к навигации Bootstrap, он прекрасно работает, когда панель навигации установлена ​​в положение: относительное , но когда я добавляю класс « fixed-top ”it нарушает дизайн .

Я пытался делать это в течение многих часов безуспешно.

Код ниже:

<nav class="navbar navbar-expand-lg navbar-dark ribbon fixed-top" style="max-width: 90%; margin-left: auto; margin-right: auto;">
  <div class="container ribbon-inner">  
    <a class="navbar-brand" href="#">Navbar</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarNav">
      <ul class="navbar-nav">
        <li class="nav-item active">
          <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Features</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Pricing</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" href="#">Disabled</a>
        </li>
      </ul>
    </div>
  </div>
</nav>

Смотрите в прямом эфире здесь: https://codepen.io/carlo-designer/pen/zmmYLV

.ribbon {    
   background: #f35b5b;
}

.ribbon:after,
.ribbon:before {
  content: "";
  position: absolute;
  display: block;
  bottom: -1em;
  border: 1.5em solid #d74545;
  z-index: -1;
}

.ribbon:before {
  left: -2em;
  border-right-width: 1.5em;
  border-left-color: transparent
}

.ribbon:after {
  right: -2em;
  border-left-width: 1.5em;
  border-right-color: transparent
}

.ribbon .ribbon-inner:after,
.ribbon .ribbon-inner:before {
  content: "";
  position: absolute;
  display: block;
  border-style: solid;
  border-color: #b23232 transparent transparent;
  bottom: -1em;
}

.ribbon .ribbon-inner:before {
  left: 0;
  border-width: 1em 0 0 1em;
}

.ribbon .ribbon-inner:after {
  right: 0;
  border-width: 1em 1em 0 0;
}

Есть идеи, как решить эту проблему?Спасибо

Answer 1

Я нашел решение, которое работает.Это заняло немного усилий, но потом оказалось проще, чем я думал:

До конфликта при использовании класса fixed-top и элементов: before, единственный способ сделать это -эмулировать fixed-top с помощью CSS.Я обернул всю строку в div с классом «липкий» и использовал этот код CSS:

.sticky {
  position: fixed;
  top: 0;
  width: 100%;
}

Вот мой CodePen с решением (я добавил большой серый div, чтобы показатьфиксированный эффект прокрутки:

https://codepen.io/CodeBoyCode/pen/OBBVLG