Bootstrap 4 навигация не изменяет размер, как ожидалось

Question

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

    <div class="fixed-top navbar navbar-light bg-light navbar-expand-md">
     <div class="container">
    <a class="navbar-brand float-left" href="/">
      <img class="float-left" src="image.jpg" height="45" width="100" 
     alt="AltTextHere">
        </a>
    <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
    <div class="navbar-collapse collapse">
      <ul class="nav navbar-nav">

        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><strong>About</strong></a>
          <ul class="dropdown-menu megamenu">
            <li class=" navTextContainer">
              <div class="row navDiv">
                <div class="col-md-6 NavTextHeader">
                  <strong>RandomTextHere</strong>
                </div>
                <div class="col-md-2 col-sm-0"></div>
                <div class="col-md-3 weight-300 line-height-10 pt-5">
                  <ul>
                    <li class="dropdown-header"><a href="#">About Us<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>
                    <li class="dropdown-header"><a href="#">Careers<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>
                    <li class="dropdown-header"><a href="#">Advertising<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>

                  </ul>



               </div>

              </div>

            </li>

          </ul>
        </li>
        <li class="dropdown menu-large nav-item"> <a href="#" class="dropdown-toggle nav-link" data-toggle="dropdown"><strong>Link 1</strong></a>
          <ul class="dropdown-menu megamenu">
            <li class=" navTextContainer">

              <div class="row navDiv">
                <div class="col-md-5">
                  <ul class="list-unstyled pt-1">
                    <li class="NavTextHeader"><strong>RandomTextHere</strong> </li>

                    <li class="NavTextHeader"><strong>RandomTextHere </strong> </li>

                  </ul>
                </div>
                <div class="col-md-1 col-sm-0"></div>
                <div class="col-md-5 weight-300 pt-5 line-height-10">
                  <ul>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                        <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1<p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                            <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300"> </li>
                    <li class="dropdown-header"><a href="#">Link 1
                                            <p class="float-right"><i class="fas fa-angle-right"></i></p></a></li>
                    <li class="dropdown-header">
                      <hr class="weight-300">
                    </li>

                  </ul>
                </div>

              </div>
              <div class="row navDiv">
                <div class="col-md-5">
                  <ul class="list-unstyled list-inline pt-1">
                    <li class="NavTextHeader list-inline-item"><a href="#">Link 1 <i class="fas fa-caret-right"></i></a></li>

                    <li class="NavTextHeader list-inline-item pl-5"><a href="#"> Link 1 <i class="fas fa-caret-right"></i></a></li>

                  </ul>
                </div>
              </div>
            </li>

          </ul>
        </li>
      </ul>
    </div>

  </div>
</div>

https://codepen.io/anon/pen/gybYeg

Вот кодекс моего текущего кода.

Спасибо

Я пробовал различные медиа-запросы, но ни один из них не имеет значения.