1

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; }
Improve this question
4
  • How did you change the menu? And why would a class named .header-image apply to the whole menu?
    – s_ha_dum
    Mar 27, 2014 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, 2014 at 13:57
  • 1
    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, 2014 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, 2014 at 14:09

1 Answer 1

Reset to default
1

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;
}
Improve this answer
6
  • 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, 2014 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, 2014 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, 2014 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, 2014 at 14:15
  • Problem solved. I just opened it on another PC and it is all centred. Will clear the cache on this pc. Thanks so much guys. Have a great day
    – Cyril Joyce
    Mar 27, 2014 at 14:24

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