Bootstrap 5 columns

With a column hack which doesn't match width and a rewired css for full width 5 columns

by Kai_Draord

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>

<nav class="navbar navbar-dark fixed-top pt-md-5 pe-md-5 pt-2 pe-2">
  <div class="container-fluid">
    <div class="row">
      <div class="col-xs-10"></div>
      <div class="col-xs-2 dropdown-wrap">
        <button class="navbar-toggler ms-auto custom-toggler menu collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
          <span class="navbar-toggler-icon"></span> MENU
        </button>
        <div class="collapse navbar-collapse menu-items" id="navbarSupportedContent">
          <ul class="navbar-nav ms-auto mb-2 mb-lg-0 menu-bg">
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#features">FEATURES</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#counter">SHARK COUNTER</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#about">ABOUT US</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3" href="#faq">FAQ</a>
            </li>
            <li class="nav-item ms-auto">
              <a class="nav-link pe-3 rounded-bottom" href="#">BACK TO TOP</a>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</nav>

CSS

.menu {
font-family: header;
color: white !important;
font-size: 3rem;
background-color: rgba(0, 0, 0, 0.3);
}

.menu-bg {
    background-color: rgba(0, 0, 0, 0.3);
}
#navbarSupportedContent {
  width:150px;
  position: absolute;
  right:0px;
  top:100%;
}

.dropdown-wrap {
  position: relative;
}