Topic: Megamenu breaks when breakpoint-lg is reached

Remy E. Francis pro asked 5 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 Small

Med Medium

Large Large

 

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>

Piotr Glejzer staff commented 5 years ago

Hi,

did you resolve your problem or do you still need help? Let me know.

Best,

Piotr



Please insert min. 20 characters.

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