Hello,
Our website, http://www.ltl.lu, uses a megamenu that is based on pages. Currently, the megamenu appears under the main menu.
What I would like to achieve is for the megamenu to start at the top edge of the screen, placing itself behind the main menu and other header elements — in effect, making the megamenu flush with the top of the viewport, but layered beneath the header.
Here’s how the menu currently looks:
https://www.ltl.lu/menuquestion/ltl.gif (animated GIF)
And here’s an example of the effect I’m aiming for:
https://www.ltl.lu/menuquestion/lcd.gif (animated GIF)
I tried adjusting the z-index values, setting the menu and other header elements to z-index: 999, and the megamenu to z-index: 0 using the following CSS, but that didn’t work:
.tdb-mega-menu .sub-menu > li {
z-index: 0;
}
I hope my explanation is clear — but please let me know if anything is unclear or if you need additional information.
Best regards,
Hi,
Unfortunately using the mega menu there is no option to achieve that, sorry. Maybe it can be done using some custom css and js, but I do not know if it is a good solution.
An alternative is to use a popup menu and set on it a page and this can be set on full width – https://forum.tagdiv.com/modal-popup/
Thank you!
Hello Calin,
thank you for your reply. I’ll give your workaround a try.
Kind regards.
