Topic: no scrollbar on hamburger menu on small devices
Expected behavior if there are many menu entries and/ or dropdowns included, scrollbar (y) is needed, to reach all menu entries. this is shown by example here (https://getbootstrap.com/docs/3.4/examples/navbar-fixed-top/#) Actual behavior in mdb4 (and mdb5) there is no scrollbar, so some menu entries cannot be reached. Resources (screenshots, code snippets etc.) as i can see, there is an overflow-y:auto in pure bootstrap for class .navbar-collapse.in { overflow-y: auto; }
hi, i tested with sample code form mdb5 Doc and got same result - no scrollbar and so no possibility to reach last menu entries (see screenshot)
Here my code: <nav class="navbar navbar-expand-lg navbar-light bg-light fixed-top">
<div class="container-fluid">
<ul class="navbar-nav">
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">Action</a></li>
<li><a class="dropdown-item" href="#">Another action</a></li>
<li>
<a class="dropdown-item" href="#">Something else here</a>
</li>
</ul>
</li>
<!-- Dropdown -->
<li class="nav-item dropdown">
<a
class="nav-link dropdown-toggle"
href="#"
id="navbarDropdownMenuLink"
role="button"
data-toggle="dropdown"
aria-expanded="false"
>
Dropdown link
</a>
<ul class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<li><a class="dropdown-item" href="#">1Action</a></li>
<li><a class="dropdown-item" href="#">1Another action</a></li>
<li><a class="dropdown-item" href="#">1Something else here</a></li>
<li><a class="dropdown-item" href="#">2Action</a></li>
<li><a class="dropdown-item" href="#">2Another action</a></li>
<li><a class="dropdown-item" href="#">2Something else here</a></li>
<li><a class="dropdown-item" href="#">3Action</a></li>
<li><a class="dropdown-item" href="#">3Another action</a></li>
<li><a class="dropdown-item" href="#">3Something else here</a></li>
<li><a class="dropdown-item" href="#">4Action</a></li>
<li><a class="dropdown-item" href="#">4Another action</a></li>
<li><a class="dropdown-item" href="#">4Something else here</a></li>
</ul>
</li>
</ul>
</div>
</nav>
Hi!
Now I see an issue. Thanks for reporting this problem. When there are more options than the page can show, the whole page is scrolling, so when you scroll your page to the bottom - hidden links should appear (it works like that only in the navbar). I think you're right - there should be a possibility to scroll it, so I added a task for this issue in our board :)
Best regards
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- User: Free
- Premium support: No
- Technology: MDB jQuery
- MDB Version: 4.19.1
- Device: iphone, macbook ...
- Browser: safari
- OS: os x 10.14, ios 14.1
- Provided sample code: No
- Provided link: Yes
Krzysztof Wilk staff commented 4 years ago
Hi!
Could you make a snippet that shows your problem using our online editor (https://mdbootstrap.com/snippets/)? We checked it and there's no problem with scrolling.
Best regards