Megamenu breaks when breakpoint-lg is reached

<!--Navbar-->

<nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar text-uppercase font-weight-bold">

<divclass="container">

<buttonclass="navbar-toggler"type="button"data-toggle="collapse"data-target="#navbarSupportedContent-7"aria-controls="navbarSupportedContent-7"aria-expanded="false"aria-label="Toggle navigation">

<spanclass="navbar-toggler-icon"></span>

</button>

<divclass="collapse navbar-collapse"id="navbarSupportedContent-7">

<ulclass="navbar-nav mr-auto">

<liclass="nav-item">

<aclass="nav-link waves-light"href="index.php">Home</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-light"href="portfolio.php">Portfolio</a>

</li>

<!-- Services -->

<liclass="nav-item dropdown mega-dropdown">

<aclass="nav-link dropdown-toggle text-uppercase"id="navbarDropdownMenuLink2"data-toggle="dropdown"

aria-haspopup="true"aria-expanded="false">Services




</a>

<divclass="dropdown-menu mega-menu v-2 z-depth-1 special-color py-5 px-3"aria-labelledby="navbarDropdownMenuLink2">

<divclass="row">

<divclass="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">

<h6class="sub-title text-uppercase font-weight-bold white-text">Featured</h6>

<ulclass="list-unstyled">

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Lorem ipsum dolor sit amet

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Consectetur adipiscing elit

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Sed do eiusmod tempor incididunt

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Ut labore et dolore magna

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Ut enim ad minim veniam

</a>

</li>

</ul>

</div>

<divclass="col-md-6 col-xl-3 sub-menu mb-xl-0 mb-4">

<h6class="sub-title text-uppercase font-weight-bold white-text">Related</h6>

<ulclass="list-unstyled">

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Quis nostrud exercitation

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Duis aute irure dolor in

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Laboris nisi ut aliquip ex ea commodo consequat

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Reprehenderit in voluptate

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Esse cillum dolore eu fugiat nulla pariatur

</a>

</li>

</ul>

</div>

<divclass="col-md-6 col-xl-3 sub-menu mb-md-0 mb-xl-0 mb-4">

<h6class="sub-title text-uppercase font-weight-bold white-text">Design</h6>

<ulclass="list-unstyled">

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Excepteur sint occaecat

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Sunt in culpa qui officia

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Sed ut perspiciatis unde omnis iste natus error

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Mollit anim id est laborum

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Accusantium doloremque laudantium

</a>

</li>

</ul>

</div>

<divclass="col-md-6 col-xl-3 sub-menu mb-0">

<h6class="sub-title text-uppercase font-weight-bold white-text">Programming</h6>

<ulclass="list-unstyled">

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Totam rem aperiam eaque

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Beatae vitae dicta sun

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Quae ab illo inventore veritatis et quasi

architecto

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Nemo enim ipsam voluptatem

</a>

</li>

<li>

<aclass="menu-item pl-0"href="#!">

<iclass="fa fa-caret-right pl-1 pr-3"></i>Neque porro quisquam est

</a>

</li>

</ul>

</div>

</div>

</div>

</li>

<liclass="nav-item">

<aclass="nav-link waves-light"href="about.php">About Me</a>

</li>

<liclass="nav-item">

<aclass="nav-link waves-light"href="contact.php">Contact</a>

</li>

</ul>

<ulclass="navbar-nav nav-flex-icons">

<liclass="nav-item">

<aclass="btn btn-outline-white grey darken-4 btn-lg"href="http://www.remyfrancis.com/proposal.html">Request A Quote!</a>

</li>

</ul>

</div>

</div>

</nav>