Customize Header for twenty twelve theme

jthelemann · Member · May 28, 2013 at 3:22 pm
Copy link

Add topic to favorites
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: (visible only to logged in users)
timethief · Member · May 28, 2013 at 3:24 pm
Copy link
Does this help? http://en.support.wordpress.com/custom-design/editing-css/#maintaining-your-custom-header
jthelemann · Member · May 28, 2013 at 3:37 pm
Copy link
Do I just copy and paste this information into the CSS?

Thank you Timethief
designsimply · Member · May 28, 2013 at 3:48 pm
Copy link
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).
jthelemann · Member · May 28, 2013 at 4:50 pm
Copy link
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?
designsimply · Member · Jun 15, 2013 at 12:55 am
Copy link
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).

No items found.