Topic: Navbar/Mega Menu drop down problem

Turner premium asked 6 years ago


HiI am having trouble with navbars and mega menus when the media size is reduced to mobile size. If a drop down goes below the bottom of the screen there is no way to scroll down to see the missing part of the dropdown list. It actually also happens on large screen size as well when the window height is reduced sufficiently to force a dropdown to go off the bottom. Certainly on mobiles, this issue is really nasty considering the user cannot see or navigate all menu items.The code below exhibits this problem when run (at least on my system).Thanks. <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <title>Test</title> <!-- Font Awesome --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"> <!-- Bootstrap core CSS --> <link href="./assets/css/bootstrap.min.css" rel="stylesheet"> <!-- Material Design Bootstrap --> <link href="./assets/css/mdb.min.css" rel="stylesheet">     <style  rel="stylesheet">         .navbar {    background-color: #212121; } .navbar .mega-dropdown {  position: static !important; } .navbar .dropdown-menu.mega-menu {  width: 100%;  border: none;  border-radius: 0; } .navbar .dropdown-menu.mega-menu.v-2 a {    padding: 15px 10px 10px 35px; } .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2 {      font-weight: 500;      font-size: 1.1rem;      line-height: 1.5;      -webkit-transition: .2s;      transition: .2s;      color: #fff !important; } .navbar .dropdown-menu.mega-menu.v-2 a.news-title-2:hover {        color: #d0d6e2 !important; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul {    list-style: none; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li {      -webkit-transition: .3s;      transition: .3s; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li:hover {        background-color: rgba(0, 0, 0, 0.2);        -webkit-transition: .3s;        transition: .3s; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu ul.caret-style li a:after {        font-family: "fontAwesome";        content: '\f0da';        position: absolute;        left: 0.5rem;        font-size: 12px;        top: 1rem; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item {    color: #fff !important; } .navbar .dropdown-menu.mega-menu.v-2 .sub-menu a.menu-item:hover {      color: #fff !important; } .navbar .dropdown-menu.mega-menu.v-2 .sub-title {    padding-bottom: 1rem;    margin-bottom: 1rem;    border-bottom: 1px solid; } .navbar .dropdown-menu.mega-menu.v-2 .font-small {    font-size: 0.85rem; } </style> </head> <html> <body id="top"> <nav class="navbar fixed-top navbar-expand-lg navbar-dark"> <div class="container">    <!-- Navbar brand -->    <a class="navbar-brand text-uppercase" href="#"> NAVBAR</a>    <!-- Collapse button -->    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent1" aria-controls="navbarSupportedContent1"        aria-expanded="false" aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>    <!-- Collapsible content -->    <div class="collapse navbar-collapse" id="navbarSupportedContent1">        <!-- Links -->        <ul class="navbar-nav mr-auto  smooth-scroll">               <li class="nav-item active">                            <a class="nav-link" href="#">Menu1<span class="sr-only">(current)</span></a>                        </li>            <li class="nav-item dropdown mega-dropdown">                <a class="nav-link dropdown-toggle no-caret" id="navbarDropdownMenuLink1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Menu_Drop</a>                <div class="dropdown-menu mega-menu v-2 row z-depth-1 special-color" aria-labelledby="navbarDropdownMenuLink1">                    <div class="row mx-md-4 mx-1">                        <div class="col-md-6 col-xl-3 sub-menu my-xl-5 mt-5 mb-4">                            <h6 class="sub-title text-uppercase font-weight-bold white-text"><a class="menu-item" href="#">Title</a></h6>                            <ul class="caret-style pl-0">                                <li class=""><a class="menu-item mb-0" href="#">Zero</a></a></li>                                <li class=""><a class="menu-item" href="#"  data-offset="100">One</a></li>                                <li class=""><a class="menu-item" href="#" data-offset="100">Two</a></li>                                <li class=""><a class="menu-item" href="#" data-offset="100">Three</a></li>                                <li class=""><a class="menu-item" href="#" data-offset="100">Four</a></li>                            </ul>                        </div>                    </div>                </div>            </li>                        <li class="nav-item">                            <a class="nav-link" href="#" data-offset="100">Menu2</a>                        </li>        </ul>    </div>    <!-- Collapsible content --> </div> </nav> </body> </html> <!-- JQuery --> <script type="text/javascript" src="./assets/js/jquery-3.3.1.min.js"></script> <!-- Bootstrap tooltips --> <script type="text/javascript" src="./assets/js/popper.min.js"></script> <!-- Bootstrap core JavaScript --> <script type="text/javascript" src="./assets/js/bootstrap.min.js"></script> <!-- MDB core JavaScript --> <script type="text/javascript" src="./assets/js/mdb.min.js"></script> <script>     // initialize scrollspy     $('body').scrollspy({         target: '.dotted-scrollspy'     });     // initialize lightbox     $(function () {         $("#mdb-lightbox-ui").load("./assets/mdb-addons/mdb-lightbox-ui.html");     });    $('.navbar-collapse a').click(function(){     $(".navbar-collapse").collapse('show'); // Was hide but changed as it caused dropdown collapse when screen size is small (hamburger menu appears)    });     /* WOW.js init */     new WOW().init(); </script>

Turner premium commented 6 years ago

After posting the question I realised what is causing the problem which is using "fixed-top" for the navbar. Quite obvious really. The question now becomes, is it possible to use "fixed-top" and have the dropdown slide under the navbar when scrolling.

Piotr Glejzer staff commented 6 years ago

Hi, You can check that code : #parent{ overflow: hidden; } #child{ overflow-y: scroll; padding-right: 17px; /* Increase/decrease this value for cross-browser compatibility */ box-sizing: content-box; /* So the width will be 100% + 17px */ } or #parent{ overflow: hidden; position: relative; } #child{ position: absolute; top: 0; bottom: 0; left: 0; right: -17px; /* Increase/Decrease this value for cross-browser compatibility */ overflow-y: scroll; } or ::-webkit-scrollbar { width: 0px; background: transparent; } Best, Piotr

TeddyS31 pro commented 5 years ago

Was this problem fully resolved? I have the same issue and cannot find a way to scroll through it.


Piotr Glejzer staff commented 5 years ago

Hi TeddyS31,

do you have some example of your problem?

Best, Piotr


TeddyS31 pro commented 5 years ago

I created a ticket that Marta answered, its the same bug as described but essentially I am having difficulty making the menu scrollable.

  <!-- 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 scrollbar scrollbar-primary" 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 scrollbar force-overflow" 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 services</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>

Piotr Glejzer staff commented 5 years ago

https://mdbootstrap.com/snippets/jquery/piotr-glejzer/340284?action=full_screen_mode

Do you see a problem with 'scrollable content'at this example?



Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Opened

Specification of the issue

  • ForumUser: Premium
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags