Topic: Megamenu breaks when breakpoint-lg is reached
Remy E. Francis pro asked 6 years ago
For some reason, the megamenu displays correctly on smaller screens, but as soon as it gets to Desktop size, ie. "breakpoint-lg" and above, it displays some strange behavior. How to fix this?:
Below breakpoint-lg:
Small
This is the code for my megamenu:
<!--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>
Add comment
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Status
Resolved
Specification of the issue
- ForumUser: Pro
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.5.10
- Device: Laptop
- Browser: Chrome
- OS: Windows 10
- Provided sample code: Yes
- Provided link: Yes
Tags