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

Help / Discuss
, ,
#1

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.

exempletopmenu

I have tried to add differents css command in the “advanced” css file in my theme customization area such as :

div.menu.menu-horizontal {
text-align: center;
}

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

Thank you in advance

#2

Hi,

It might be that your CSS rule isn’t finished. Try to add this after your

div.menu.menu-horizontal ul {
    display: inline-block;
}
#3

Hello nikpetrenko,

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

My css if file is like this atm:

div.menu.menu-horizontal {
background: linear-gradient(160deg,#00afd7,#0c2340);
}

div.menu.menu-horizontal 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 ?

#4

Hi,

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

/*instead of display: inline-block remove it*/
ul {
    list-style-type:none;
    text-align:center;
} 
li {
   display:inline-block;
}

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

#5

Hi,
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 :
exemplecenterall

#6

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

#7

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

#8

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.

#9

Hello @nikpetrenko,

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

}

Have a nice day !