Centering li text in menus

[aengberg]

Using Weaver Xtreme Plus, my menu has four items which when you hover over them, it becomes obvious that the text is left-aligned within the containing boxes.

I would like to center-align the text within the <li> elements so that when you hover over the menu, the text is centered inside the highlighted box.

I tried adding custom css:

.wvrx-menu li {

      width: 10em;

        margin: 0 auto;

}

which applies the width properly, but the auto margin has no effect. Text-align: center won’t work as it’s a block level element.

Any ideas?

Sorry if this has been asked before, I searched but couldn’t find it.

[scrambler]

Please provide a link to your site with specific about where to look so we can be sure of the custom CSS to use

[aengberg]

Hi Scrambler – http://testkpa.thecotswolditguy.co.uk/ – the menu underneath the header.

I would like “Asset Search”, “About” etc to be centered within its block when hovered over.

Thanks for taking a look!

[scrambler]

I believe this is because you used main options > menus > primary menu bar > Desktop menu spacing option in Xtreme Admin.

That option unfortunately adds space only on the right side, which makes the menu item look off center on Hover.

Read below on how to increase the space between menu items in a centered way.

To add symmetrical space between menu items, do not use the desktop spacing option, instead, add the rule below in Main options > Fonts & Custom > Custom CSS Rule box, with the value you like.

@media (min-width:768px) {
.menu-primary .wvrx-menu-container li a{padding-right:1.5em;padding-left:1.5em;}
}

@weaver, I have had to provide that solution a number of times now. Unless there is a good reason why you are only adding padding to the right and not the left when people use main options > menus > xx menu bar > Desktop menu spacing option, I think you should consider adding the left padding in your rule.

if there is a case where that causes problem, I would be happy to look at it to see if there is a solution for it too.

[aengberg]

Scrambler, thank you, that worked perfectly.

[Author]

Posts