Move header image to top for TwentyTwelve theme

• 

  dsworder · Member · Feb 6, 2013 at 10:32 pm

  • Copy link
  • Add topic to favorites

  How does one place the title and tagline directly on top of a header image? The desired effect is shown in the upper left corner of the following WordPress blog:

  http://jkudish.com

  …whereas if you look at my WordPress blog (www.eManagedAccounts.com) you’ll see that while the title and tagline are appropriately positioned, there’s no image. The dashboard screen located at Appearance >> Header allows a header image to be specified. However, once specified, that image is displayed vertically beneath the main menu instead of the upper left corner. This leads me to believe that Appearance >> Header is referring to something else entirely.

  Any ideas? Can this be accomplished with the custom CSS module?

  David

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Feb 8, 2013 at 12:45 am

  • Copy link

  One of the easiest ways to do this is to create a header image with the title/tagline in the image and then upload it via the header uploader and then in the “header text” section, disable the header text. The site will still have the title and tagline internally so that the search engines can find it.

• 

  dsworder · Member · Feb 8, 2013 at 12:56 am

  • Copy link

  thanks, friend.

• 

  thesacredpath · Member · Feb 8, 2013 at 12:57 am

  • Copy link

  You are welcome.

• 

  commonriver · Member · Feb 24, 2013 at 6:00 pm

  • Copy link

  I followed these instructions as well and my header image still appears below the menu. How can I move it to above the menu? My website is
  http://commonriver.wordpress.com/

• 

  designsimply · Member · Feb 28, 2013 at 2:00 pm

  • Copy link

  Your question is different from the one earlier in this thread.

  To move the Twenty Twelve header image above the main menu, add this to your Appearance → Custom Design → CSS editor:

  .site-header {
  	position: relative;
  }
  
  .site-header > a {
  	position: absolute;
  	top: 20px;
  }
  
  .main-navigation {
  	margin-top: 296px;
  }