Member Avatar for Julia25

I'm almost done experimenting on how make the slideshow background clickable

but I was hoping the mega menu dropdown will show up without adjusting the height since its responsive,
is there any hope to this?

Edited by Julia25
  • 3 Contributors
  • 4 Replies
  • 182 Views
  • 7 Hours Discussion Span
  • Latest Post Latest Post by Julia25

Dani AI

Generated

This is a classic clipping/stacking-context problem rather than a JS bug. As hinted, letting the menu expand instead of forcing a fixed height is part of the fix. From what found in the megamenu wrapper, the dropdown was being clipped by its ancestor and/or sitting behind the slideshow. asked for code — below is a short checklist and small, safe examples you can try in devtools to confirm and fix the issue.

Checklist to debug (use browser devtools):

  • Inspect the menu ancestors for any overflow: hidden (or auto) and temporarily toggle to visible to see if the dropdown appears.
  • Look for CSS that creates a new stacking context on parents (e.g., transform, filter, opacity < 1, will-change) — those stop a child from rising above siblings even with a high z-index.
  • Check whether the slideshow uses an overlaying link or element that covers the dropdown area. If so, that overlay may be catching clicks or visually covering the menu.
  • Try moving the dropdown element out of the clipped container (append it to <body>) as a test — if that fixes it, the problem is containment/clipping.

Practical CSS patterns to test (change selectors to match your markup):

/* allow the menu to render above siblings */
.site-header-wrapper { overflow: visible; } 

.mega-dropdown {
  position: absolute;   /* detach from normal flow */
  top: 100%;
  left: 0;
  z-index: 1000;        /* sit above slideshow */
}

/* keep slideshow behind menu; when menu is active, prevent the slideshow overlay from trapping clicks */
.slideshow-overlay { z-index: 1; }
.menu-active .slideshow-overlay { pointer-events: none; }

Extra tips: avoid huge arbitrary z-index numbers — keep a documented layering scheme. If a parent must keep transform for layout, consider moving the dropdown markup outside that parent or use JavaScript to toggle a top-level menu container. These checks will show you exactly which rule you changed in the wrapper that resolved the dropdown.

Recommended Answers

All 4 Replies

Member Avatar for Member #949455

May I ask what is the issue you are having? Can you at least post some code with what you mention so it would be easier to understand & follow.

Member Avatar for momonq1990

i know this mega menu... try to put height:auto; on your .dropdown_1columns... and so on{....}

Member Avatar for Julia25

Thanks for the reply but found the solution in

.megamenu_wrapper_full .megamenu_container
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.