Topic: Megamenu Fixed-Top

LAGIER priority asked 5 years ago

Hello everyone,
Would you have the solution for a problem with Mega Menu and the Fixed-Top position on smartphone.
Mega Menu works perfectly on PC with the position "Fixed-Top" and also on the smartphone, but on the screens of the smartphone I can not scroll the navigation menu, while back the page scrolls.
For example here is the address of my web page:

I also tested with the example code of the page on MDB, it's the same with "Fixed-Top".

If we do not add "Fixed-Top" to: <nav class="navbar navbar-expand-lg navbar-dark fixed-top scrolling-navbar">

, no problem and the navigation and the page scrolls, but not with fixed- top where the navigation remains blocked.

If you could explain the problem for me to keep fixed-top with small screens, it would be wonderful.

Thank you.

AlainMega-mena avec fixed-top

Marta Wierzbicka staff answered 5 years ago


we will try to find a good solution for the next release. Thank you for patience.



LAGIER priority answered 5 years ago

Hello Marta,

I may have found a solution, but I am not a programmer, it may be necessary to purge this code that works.

@media (max-width: 740px) {} @ media (min-width: 800px) and (max-width: 850px) {@ media (min-width: 560px) and (max-width: 650px) {} @ media (min-width: 660px) and (max-width: 700px) {} top-nav-collapse {background-color: # 9da4b1! important} @media (max-width: 992px) {. fixed-top {position : absolute; background-color: # 7283A7 significant}} navbar: not (.top-nav-collapse) {background: transparent} significant .top-nav-collapse {background-color: # 7283A7 significant} @media!.! (max-width: 768px) {. navbar: not (.top-nav-collapse) {background: # 9da4b1! important}} @ media (min-width: 800px) and (max-width: 850px) {. navbar: not (.top-nav-collapse) {background: # 9da4b1 important!}}

LAGIER priority answered 5 years ago

Hello marta,

Thank you for your solution, unfortunately it does not work.
I have not indicated the problem correctly.

The navigation menu collapses completely, that's what I can see on the PC screen with Windows Resizer and others.

Just that we can not scroll through the navigation because of the Fixed-top. as you understand it.

For now I am going to remove the fixed-top until you have a solution to this problem.

Thank you and have a good weekend.


Marta Wierzbicka staff answered 5 years ago


for now, I can recommend you this solution: 

#topNav ul li ul {max-height: 50px; overflow:auto; }
Add this code above to your styles and id="topNav" to your  <nav>. We will work on a better solution for this issue as soon as possible.

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Priority
  • Premium support: Yes
  • Technology: MDB jQuery
  • MDB Version: 4.5.10
  • Device: MDB PRO 4.5.13
  • Browser: Chrome, FF
  • OS: Windows 10 64
  • Provided sample code: Yes
  • Provided link: Yes