Customize Header for twenty twelve theme

  • Author
  • #1284830


    I am making a new site for my nonprofit organization and am having a little trouble customizing the header. If you take a look at what I’ve got so far,, you can see everything is overlapping. Can anyone help me or point me in the right direction?

    Thank you!

    The blog I need help with is




    Do I just copy and paste this information into the CSS?

    Thank you Timethief


    The example in that post is specific to the Benevolence theme. Also, that example is probably not the exact right fit for what you’re trying to do. CSS is theme specific, so you need to make sure to note which theme someone is working on when you look up other CSS examples online.

    Looks like you just want to move the header image above the site title in the Twenty Twelve theme. Based on the CSS you’ve added so far, try changing this:

    .main-navigation {
    	margin-top: 296px;

    To this:

    hgroup {
    	margin-top: 220px;

    What that does is grab on to the element above the menu and moves all of it down, instead of just moving the navigation by itself (which is what you had before).



    Designsimply, thank you! It worked and looks great!

    Last question, is there a way I can move the title (SOS – Save Our Schools) next to the logo?


    Sure. Find this in your custom CSS:

    .site-header h1 {
    	float: right;
    	position: relative;
    	text-align: left;
    	top: -90px;
    	width: 50%;

    And then try changing the width value to 55% (or whatever number you looks best to you).

The topic ‘Customize Header for twenty twelve theme’ is closed to new replies.