Customize Header for twenty twelve theme

  • Author
    Posts
  • #1284830

    jthelemann
    Member

    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, jthelemann.wordpress.com, 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 jthelemann.wordpress.com.

    #1284922

    timethief
    Member
    #1284923

    jthelemann
    Member

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

    Thank you Timethief

    #1284930

    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).

    #1284965

    jthelemann
    Member

    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?

    #1285178

    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.