WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I have a really simple site at cyriljoyce.com on the 2012 theme

I created a child theme to center the header and menu bar but just cannot seem to make it work. The child theme text is below

The line at the bottom used to center the header image but when I changed the menu on the site it stopped working.

Theme Name:     Twenty Twelve Child
Theme URI:      http://cyriljoyce.com/
Description:    Child theme for the Twenty Twelve theme
Author:         Cyril Joyce
Author URI:     http://cyriljoyce.com/about/
Template:       twentytwelve
Version:        0.1.0
@import url("../twentytwelve/style.css");

.header-image { margin-left: auto; margin-right: auto; display:block; }
share|improve this question
How did you change the menu? And why would a class named .header-image apply to the whole menu? – s_ha_dum Mar 27 '14 at 13:52
Yes, the header-image class should only apply to the header of course. I created a new menu on the site I thought it might help center the menu. When I reverted to the original, the header was no longer centred. I had this class up there at the time:@media screen and (min-width: 600px) { .main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul { border-bottom: 1px solid #ededed; border-top: 1px solid #ededed; display: inline-block !important; text-align: center; width: 100%; } } My apologies, I should have added this to my original post. – Cyril Joyce Mar 27 '14 at 13:57
You can still add that to the original post, and you should. Your question is editable. Look for the "edit" link below the post. – s_ha_dum Mar 27 '14 at 14:07
Sorry, why do you no longer have that CSS rule in place? It looks like what you need. – s_ha_dum Mar 27 '14 at 14:09

To center the menu just edit this css code :

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    text-align: left;

to :

.main-navigation ul.nav-menu, .main-navigation div.nav-menu > ul {
    text-align: center;
share|improve this answer
Thanks, I added that line of code to my child theme but it does not seem to change anything. I am starting to think my child theme is not set up correctly.. – Cyril Joyce Mar 27 '14 at 14:06
@CyrilJoyce i checked that css code and there is no problem, do you clear your browser cache with refreshing ? – Farzad Mar 27 '14 at 14:09
Thanks for checking the code, that's good to know. I am not sure what is involved in clearing the browser cache. Can you explain? Sorry to come across as ignorant. – Cyril Joyce Mar 27 '14 at 14:12
@CyrilJoyce your welcome , when you edit the css codes, you have to refresh your site with deleting browser cache, just open your website and press this keys to open site with cleared cache : "ctrl + F5" . check it should be solved. – Farzad Mar 27 '14 at 14:15
OK thanks will give that a go – Cyril Joyce Mar 27 '14 at 14:16

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.