Pure CSS Mega Menu

[picaflor-azul]

If I understand you correctly, you want to centre the entire menu within the header. I share your grief. So many bells and whistles but no sweet solution for this.

One albeit messy and approximate way to do it is by editing the menu wrapper in stylesheet_mega_menu.css.

#mega-wrapper {
width: 980px; /*change 980px to an em value (eg 50em) that is only a few ems wider than the greatest width of your menu at various zooms. Applying an background colour will let you see the result. Too small a value and the menu may wordwrap.*/
margin:0 auto; /* auto must remain as it centralises menu.*/
display:block;
position: relative;
z-index:9999;
background:#ff0; /* Optional. For checking width. Can be retained if desired. */
padding-left:2em; /* this is the trick. Adjust this value until the menu looks near enough centred at various zooms. */
}

There are other ways to do this, (eg changing display:block; to display:table; etc) but I have yet to get them to work as desired.

Hope this helps.

One way to easily do this would be to add a margin-left to the .mega-menu li. You would need to play with the numbers until you get one that will center all of the links within the #mega-wrapper.

.mega-menu li {float:left;text-align:center;position:relative;margin-right:20px;margin-top:6px;margin-left:60px /*or whatever number of pixels works*/ ;border:none;}

Thanks,

Anne