Member Avatar for kmpoaquests

Trying to align my mega menu on my test site

if you put your mouse over different sections of the navigational menu the next layer will not be displayed in the center what I'm trying to do is center

I tried doing margin auto and width 100%. but it didn't work.

the test site is

Thank you

  • 2 Contributors
  • 3 Replies
  • 83 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by kmpoaquests

Dani AI

Generated

Quick diagnostic and practical fix tied to the thread: asked for the stylesheet and supplied it. The most common reasons a mega menu panel does not visually center are (a) the submenu is absolutely positioned but its nearest positioned ancestor is not the nav (so it centers relative to the page), (b) the submenu has width:100% or other offsets that defeat centering, or (c) competing left/right rules or floats override the intended placement. Make the nav the positioned reference and center the panel relative to that element.

Try a minimal centering rule like this (apply to the submenu wrapper and its parent):

/* parent must be the positioned reference */
.nav { position: relative; }

/* center the mega panel under its parent */
.nav .mega { position: absolute; left: 50%; transform: translateX(-50%); top: 100%; width: /* desired width */; }

Quick troubleshooting checklist: use browser devtools to inspect the computed position, left, width, and any transforms; confirm the submenu’s positioned ancestor is the nav; remember margin: auto on absolutely positioned elements only centers when left and right are 0 and a width is set; constrain max-width if the panel overflows the viewport; and consider a flexbox layout for the top-level menu if centering the trigger itself is needed ([position] (https://developer.mozilla.org/en-US/docs/Web/CSS/position), [transform] (https://developer.mozilla.org/en-US/docs/Web/CSS/transform), [Using Flexbox] ()).

Recommended Answers

All 3 Replies

Member Avatar for weekendrockstar

Hmm can you post the css for the menu section? Might allow me to make a determination. I see that the menu layer isn't centered physically when hovering over the main link but without the css I can't see why.

Member Avatar for kmpoaquests

part of the css is styled within the div and the other half is here

I appreciate the help

Member Avatar for kmpoaquests

bump ... can anyone confirm if this is possible ?

thank you !

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.