Megamenu does not overlap content


Topic: Megamenu does not overlap content

David Macek pro asked 6 years ago

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:

Test


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.


David Macek pro answered 6 years ago

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.


Please insert min. 20 characters.

FREE CONSULTATION

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

Status

Resolved

Specification of the issue
  • 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