Position :after and :before behind bootstrap navigation fixed top

Question

I’m trying to apply a ribbon effect to Bootstrap navigation, it works great when the navigation bar is set to position:relative, but when I add the class “fixed-top” it breaks the design.

I’ve tried to do this for many hours with no success.

Code is below:

<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>

See it live here: 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;
}

Any idea how to solve this ? Thanks

Answer 1

I have found a solution that works. It took a bit of effort, but then turned out to be simpler than I first thought:

Before of the conflict when using the class fixed-top and the :before elements, the only way to do it is to emulate the fixed-top using CSS. I wrapped the whole of the bar in a div with the class "sticky", and used this CSS code:

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

Here is my CodePen with the solution (I have added a large grey div to show the fixed scrolling effect:

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