Center submenu under main nav

[Mika23]

I would like to have my submenu be centered under the main nav item it belongs to. Something as in the first link below. I’m able to center the items in the submenu, but for one or the other reason I’m not able to center the submenu (what drops down) under the menu item. Can someone help? Thanks!

Link 1 (example): http://imgur.com/HvYfzDH

Link 2 (my site): http://www.carinescloset.com/

[Paulie_D]

I think this will work.

Try adding this:

#main-nav ul {
width: 150%; 
left: -25%;
}

The width figure is arbitrary, you just have to make it wide enough so that your submenu text fits inside each li

The left value pulls the submenu into the middle.

[Mika23]

Thanks a lot for your help. This helped but sadly enough only for the first few menu elements. The last few (city, men, about) it doesn’t work anymore. Do you know why?

[Paulie_D]

What do you mean by “doesn’t work”?

[Mika23]

Sorry, should have been more clear.

For those 3 menu items the border of the sub-menu is still centered under the main nav item but the links in the submenu are not centered under main nav and also the submenu is now too small for the links. They go outside the border.

[Paulie_D]

As I said, the numbers are arbitrary so you may have to adjust them., AFAIK the general principal should work, it’s just a matter of tweaking.

[MikesBarto2002]

What Paulie_D is saying is that for instance, for the “City” menu item, try:

li {
  width: 200%;
  left: -50%;
}

[Mika23]

OK, I’m still pretty new but did not think it was that difficult. I tried multiple bits of code but none work. Can you help out and let me know what I am doing wrong?

li#menu-item-517.menu-item.menu-item-type-post_type.menu-item-object-page menu-item-has-children.menu-item-517 {
width: 200% important!;
left: -50% important!;
}

and

menu-item-517 li {
width: 200% important!;
left: -50% important!;
}

[Author]

Posts