Menu has moved from center to left

Here is the CSS to center your menu. You need to put the CSS in a Custom CSS file. Some themes have a place to put Custom CSS or you can do the following to change your CSS so it isn’t overwritten by an update to the theme:

1. Create a child theme.
2. Install a Custom CSS plugin
3. Install JetPack and activate Custom CSS

#access ul {
    text-align: center;
    display: inline-block;
}

Hi Stacy,

Thanks for the response. Unfortunately, it didn’t work. This is very frustrating since I didn’t change anything. Any other suggestions would be appreciated.

Thanks,

Karen

You need to set text-align; center on the containing element and remove the float: left on the menu items themselves:

#access {
text-align: center;
}

#access li {
float: none;
display: inline-block;
}

Hi Stephen,

Should I enter this into the Custom CSS or make changes in the editor?

Thanks,

Karen

Did you already download Jetpack as Stacy suggested? If so, you should enter the code in Jetpack’s Custom CSS option.

Hi Stephen,

That did the trick, thank you, thank you, thank you!!!

Karen

Hi Stephen,

I did notice one other thing that changed when the menu changed and that is the sub menus. They don’t line up vertically anymore. I know it must have something to do with the size, but would appreciate any help. Is this something that I need to create a new topic for?

Thanks,

Karen

Hi Stephen,

I realized that after I added the script you provided, a few things went wrong. A new page now appears in the menu bar called navigation and the sub menu’s do not align properly under the main heading. I removed the script and the menu moved back to the left, but the other issues went away.

Is it possible to have it all:-) Can I have a centered menu, without a navigation page and sub menus that line up under the main heading? Call me a dreamer………….

Thanks,

Karen

To fix the submenu and to hide the extra navigation page, try adding this code:

#access li.default-menu {
display: none;
}

#access .sub-menu {
text-align: left;
}

#access .sub-menu li {
display: block;
}

Thanks Stephen, that did it. So appreciate these forums!