Topic: Navbar/Mega Menu drop down problem
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>
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
Turner premium commented 5 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 5 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, PiotrTeddyS31 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.
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?