Topic: Mega Menu Not Mobile Friendly!!!!!

TeddyS31 pro asked 5 years ago


I cannot make the mega menu mobile friendly. It's not scrollable in any way at all and I need a solution.

Also there's no recognition of code snippets and lninks to add to increase the post quality

      <!-- Navbar -->
  <nav class="navbar fixed-top navbar-expand-md navbar-dark scrolling-navbar">

    <a class="navbar-brand" href="index.html">
      <img src="img/leaf.svg" alt="Prime Trust LLC" class="logo d-inline" id="navbarLogo">
    </a>

    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
      aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>

    <div class="collapse navbar-collapse" id="navbarSupportedContent" style="margin-bottom: -0.25%;">
      <ul class="nav mr-auto" style="margin-top: 1.0rem;" >

        <li class="nav-item dropdown mega-dropdown active" style="padding-bottom: 5%;">
          <a class="nav-link dropdown-toggle text-uppercase" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
            solutions
          </a>

          <div class="dropdown-menu mega-menu z-depth-0 py-5 px-3" aria-labelledby="navbarDropdownMenuLink" style="margin-top: -1%;">
            <div class="row justify-content-center">
              <div class="col-md-3 sub-menu mb-xl-0 mb-4" aria-labelledby="navbarDropdownMenuLink">
                <h6 class="text-uppercase mb-4">our solutions</h6>
                <p>
                  Our services and solutions are tailed to completely disrupt the traditional trust industry by writing
                  which brings services to the masses, as well as business partners can build on top of.
                </p>
                <a href="solutions.html" class="btn btn-md text-uppercase z-depth-0 waves-effect waves-light" id="solutionsButton">
                  learn more
                </a>
              </div>

              <div class="col-md-3 sub-menu mb-xl-0 mb-4 ml-3">
                <h2 class="text-uppercase mb-4">our products</h2>
                <a class="dropdown-item" href="asset-protection.html">Asset Protection Trusts</a>
                <a class="dropdown-item" href="https://collegetrust.com/" target="_blank">College Savings Trusts</a>
                <a class="dropdown-item" href="custody.html">Custodial Solutions</a>
                <a class="dropdown-item" href="compliance.html">Compliance Solutions</a>
                <a class="dropdown-item" href="escrow.html">Escrow Services</a>
                <a class="dropdown-item" href="funds-processing.html">Funds Processing</a>
                <a class="dropdown-item" href="digital-assets.html">Digital Asset Solutions</a>
              </div>

              <div class="col-md-3 sub-menu mb-xl-0 mb-4">
                <h2 class="text-uppercase mb-4">api servicess</h2>
                <p style="margin-top: 1.75rem;">
                  Prime Trust's API allows authorized, vetted parnters to integrate with our financial services.
                  Variety of services and options to help automate your business.
                </p>
                <a href="api.html" class="btn btn-md text-uppercase z-depth-0 waves-effect waves-light" id="apiButton">
                  learn more
                </a>
              </div>


            </div>
           </div>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="blog">Blog</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="about.html">About Us</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="faq,html">FAQ</a>
        </li>
        <li class="nav-item">
          <a class="nav-link text-uppercase" href="contact.html">Contact Us</a>
        </li>
      </ul>
      <ul class="navbar-nav ml-auto">
        <li class="nav-item">
          <a class="btn waves-effect waves-light" href="https://innovue30.innovestsystems.com/prm/prm/authentication/logon?returnurl=/prm/prm/" target="new" id='loginButton'>Client Login</a>
        </li>
      </ul>
    </div>
  </nav>
  <div class="fixed-action-btn smooth-scroll">
    <a href="#top-section" class="btn-floating btn-large green waves-effect waves-light">
      <i class="fal fa-chevron-circle-up fa-2x"></i>
    </a>
  </div>
  <!-- /Navbar -->

richardlloyd priority answered 2 years ago


Hi

Is there any update to making the megamenu scroll on a small screen with a fixed navbar?


Grzegorz Bujański staff commented 2 years ago

Hi. It's quite an old thread and we've released several versions in the meantime. Please create a snippet and describe what is not working properly for you


Marta Wierzbicka staff answered 5 years ago


Hi,

we will try to find a solution for these problems of the mega menu in this release. We will inform in our changelog after we will do this.

Best, Marta


Marta Wierzbicka staff answered 5 years ago


Hi,

we will work on improving the mega menu soon. And you can always create a snippet showing the problem here: https://mdbootstrap.com/snippets/. Just information for the future.

Best, Marta


TeddyS31 pro commented 5 years ago

great, i created a JS workaround where I am removing the fixed top class and adding it back


Marta Wierzbicka staff commented 5 years ago

Hi,

thank you for your patience and I'm glad you found a workaround for the mega menu in your project.

Best, Marta


TeddyS31 pro commented 5 years ago

Marta, unfortunately, it did not work. I need a solution of using a scroll bar but I can't seem to get it to work according to the documents. Can you assist? My JS workaround does not work in terms of removing and adding the class fixed-top



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Pro
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.6.1
  • Device: Macbook Pro 13
  • Browser: Chrome
  • OS: Mac OS Mojave
  • Provided sample code: No
  • Provided link: No