How to center horizontally and organize the menu under the page header?

Hello everyone,

I would like to center horizontally the different items in my menu bar and also be able to adjust the spacing between them.


I have tried to add differents css command in the “advanced” css file in my theme customization area such as : {
text-align: center;

…without success. So If you have any solution it would be very welcome !

Thank you in advance


It might be that your CSS rule isn’t finished. Try to add this after your ul {
    display: inline-block;

Hello nikpetrenko,

First of all, thanks for your reply !
I have tried to add this line but it still doesn’t work :

My css if file is like this atm: {
background: linear-gradient(160deg,#00afd7,#0c2340);
} ul {
background: blue;
text-align: center;
display: inline-block;
width : 100%;

I have added a background: blue; command in order to see more clearly what’s happening.
Do you have any other solution ?


What custom menu extension are you using? Also, have you tried to set these CSS rules:

/*instead of display: inline-block remove it*/
ul {
li {

As far as you’ve only applied CSS for ul element, but each link is wrapped inside li element.

Again thanks for your time
What do you mean with the custom menu extension ? The color theme ?
Yes I have tried to add them but you will see the result below, everything is centered except the top menu aha :

I mean, where did you get the nav menu (top) under the picture?

I have created a normal menu and setted it to “After the Page Header” in the Menu Display Location.

Probably it doesn’t center the menu due to the specified width. What is the menu layout if you add margin: auto;? And without width? Also, it can require a float parameter.

Hello @nikpetrenko,

Thanks for your help, unfortunately it didn’t work but I have found a solution finally : ul {
justify-content: center;
display: flex;


Have a nice day !