How can I center the menu on my WordPress site?

February 18, 2023February 22, 20231 Views

I’m trying to get the menu on my WordPress site to align center.

I tried a bunch of things, including pulling out the float: left; CSS entry, but it won’t work.

Can someone please help me?

Thanks a lot!

Post Views: 1

4 comments

Anonymous says:

February 18, 2023 at 10:05 am
Remove float: left; style and add this style:
```
ul#top-menu {
    margin: 0 auto;
    width: 425px; /*the menu width*/
}
```
Log in to Reply
Anonymous says:

February 18, 2023 at 10:05 am

Give #top-menu an explicit width width: 450px and margin: 23px auto 0 auto;

Get rid of the float: left.

Alternatively, make the li elements inline blocks display: inline-block and use text-align: center on their parent.

Log in to Reply

ul#top-menu { margin-top: 23px;  font-weight: bold; margin-left: auto; margin-right: auto; width: 420px;}

Anonymous says:

February 18, 2023 at 10:05 am

How about margin-left: 30%;? Just adjust it to be exactly centered…

Log in to Reply