Bootstrap Navbar не прокручивает экран меньшего размера

Question

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

У вас есть какое-нибудь решение для этого?

Вот код, который я придумал:

HTML

        <div class="baraDeNavigare">

        <nav class="navbar navbar-expand-lg navbar-light  fixed-top  ">
            <button type="button" class="navbar-toggler" data-toggle="collapse" data-target=".navbar-collapse">☰</button>
            <a class="navbar-brand col-2" >
                <img src="../images/Layer_2.png"  >
                <img src="../images//2-layers.png"  >
            </a>

        <div class="navbar-collapse collapse">





          <div class="collapse navbar-collapse flex-row-reverse" id="navbarSupportedContent">
            <ul class="navbar-nav  ">

                <li class="nav-item dropdown menu-large">
                    <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                  Services
                     </a>
                    <ul class="dropdown-menu megamenu">
                        <div class="row">
                            <li class="col-md-2 dropdown-item">
                                <ul>
                                    <li class="dropdown-header text-white ">Product Categories</li>

                                    <li><a href="#">Accesories</a></li>
                                    <li><a href="#">Alcohol</a></li>
                                    <li><a href="#">Art</a></li> 
                                    <li><a href="#">Books</a></li> 
                                    <li><a href="#">Drinks</a> </li>
                                    <li><a href="#">Electronics</a></li>
                                    <li><a href="#">Flowers & Plants</a></li>
                                    <li><a href="#">Food</a></li>
                                </ul>
                            </li>
                            <li class="col-md-2 dropdown-item">
                                <ul>
                                    <li class="dropdown-header">.</li>
                                    <li><a href="#">Gadgets</a></li>
                                    <li><a href="#">Garden</a></li>
                                    <li><a href="#">Grocery</a></li>
                                    <li><a href="#">Home</a></li>
                                    <li><a href="#">Jewelry</a> </li>
                                    <li><a href="#">Kids & Baby</a></li> 
                                    <li><a href="#">Men's Fashion</a></li>
                                    <li><a href="#">Mobile</a></li>
                                </ul>
                            </li>
                            <li class="col-md-2 dropdown-item">
                                <ul>
                                    <li class="dropdown-header">.</li>
                                    <li><a href="#">Motorcycles</a></li>
                                    <li><a href="#">Movies</a></li>
                                    <li><a href="#">Music</a></li>
                                    <li><a href="#">Office</a></li>
                                    <li> <a href="#">Pets</a></li>
                                    <li><a href="#">Romantic</a></li>
                                    <li> <a href="#">Sport</a></li>
                                    <li> <a href="#">Toys</a></li>

                                </ul>
                            </li>
                            <li class="col-md-2 dropdown-item">
                                <ul>
                                    <li class="dropdown-header text-white">Sale</li>
                                    <li><a href="#">Accessories</a></li>
                                    <li><a href="#">Alcohol</a></li>
                                    <li><a href="#">Art</a></li>
                                    <li><a href="#">Books</a> </li>
                                    <li><a href="#">Drinks</a></li>
                                    <li><a href="#">Electronics</a> </li> 
                                    <li><a href="#">Flowers & Plants</a></li>
                                    <li><a href="#">Food</a> </li>
                                </ul>
                            </li>

                            <li class="col-md-3 offset-1 dropdown-item">
                                <ul>
                                    <img src="../images/Layer_9.png"  class="img-fluid" alt="Woman shopping">
                                </ul>
                            </li>
                        </div>
                    </ul>


              </li>


                      <li class="nav-item ">
                           <a class="nav-link" href="#">company</a>
                      </li>

                     <li class="nav-item ">
                        <a class="nav-link" href="#">library</a>
                     </li>
        </ul>
          </div>
        </nav>
    </div>

, и этоSCSS у меня есть

    .dropdown-header{
    margin-bottom:10px;
    }

    .menu-large {
    position: static !important;
    overflow:auto;
    }

    .megamenu {
    padding: 45px;
    width: 100%;
    background-color: $albastruNav;

    }

    .megamenu > div > li > ul {
    padding: 0;
    margin: 0;
    }

    .megamenu > div > li > ul > li {
    list-style: none;
    }

    .megamenu > div > li > ul > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: normal;
    color: white;
    white-space: normal;
    }

    .dropdown-header{
    font-weight:bold;
    font-size:16px;
    color:$albastruNav;
    padding: 3px 20px;
    }

    .dropdown-item:hover{
    color:inherit;
    background-color: inherit;

    }

    @media (max-width: 768px) {
    .megamenu {
      margin-left: 0;
      margin-right: 0;
    }
    .megamenu > li {
      margin-bottom: 30px;
    }
    .megamenu > li:last-child {
      margin-bottom: 0;
    }
    .megamenu.dropdown-header {
      padding: 3px 15px !important;
    }
    .navbar-nav .open .dropdown-menu .dropdown-header {
      color: #fff;
    }
    }