[Resolved] Centring Primary and Secondary navigation menus

[Michael]

I have both Primary and Secondary menus in use, and both set (via Customise > Navigation Alignment) to ‘Center’.

Both menus have more than seven items. On a wide browser view, both menus display their items centred as expected. When the width of the browser drops to the point where the menu items have to wrap onto two lines, the Primary menu does this as expected but the Secondary menu becomes aligned left.

I think the Primary menu has
.main-navigation .main-nav>ul {justify-content: center; }
whereas the matching class from the Secondary menu doesn’t.

I’m able to correct the behaviour in Customise > Additional CSS, but it seems odd to me. Is this a bug?

Many thanks

[David]

Hi there,

can you share a link to your site so i can see whats going on?

[Michael]

Sorry, it’s not online at this stage of development. What else could I provide?

[David]

Try this CSS:

.secondary-navigation .main-nav > ul {
    justify-content: center;
}

Its missing from the theme styles – we’ll take a look at correcting that

[Michael]

Thanks David, that’s great. It helps to know that it was missing… shows I’m learning!

[David]

You’re welcome – thanks for pointing it out!

[Author]

Posts