Topic: Megamenu does not overlap content
Hi,
I can see somebody else opened similar question but it hasn't been solved. I use megamenu and it works perfectly fine as long as the browser window is big. Once I make it smaller or run the webpage on my mobile phone, major parts of the menu are hidden. Please try this example:
Ok, it's obviously my fault. The container under the menu had "absolute" position so once the megamenu got smaller, it needs to slide the below content down. As the container was at absolute position, the megamenu could not slide it down and tried to write through the content below. Although this is my mistake, I think you should consider adding a proper z-index to the megamenu (even the compact version of it) to make sure it will be shown over the content.
You can see my snippet below:
https://mdbootstrap.com/snippets/jquery/david_macek/270413
See the very last line of the CSS file - when you remove it, it does not work. I repeat the problem is only when the megamenu is compact (small) - so only on smaller screens.
Piotr Glejzer staff commented 6 years ago
Ok, cool that you resolve your problem. I added your idea with an index to our task to do to check it. Thank you very much. Have a nice day.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Pro
- Premium support: No
- Technology: General Bootstrap questions
- MDB Version: -
- Device: Notebook
- Browser: Chrome
- OS: Windows 10
- Provided sample code: No
- Provided link: Yes
Piotr Glejzer staff commented 6 years ago
May you use our snippet and put your code to see a problem with that. I will try to resolve that as soon as possible. Have a nice day.
https://mdbootstrap.com/snippets/
David Macek pro commented 6 years ago
Thanks Piotr, however I can't make the snippet work. The menu never pops up - not sure how exactly I should do it. Isn't the attached link sufficient?
Piotr Glejzer staff commented 6 years ago
Did you try to do something like that?
https://mdbootstrap.com/snippets/jquery/piotr-glejzer/267837
I would like to help with your site but it's looking a little bit confusing so I will be rather if you will create a simple snippet with your problem.