Change Header Layout

[Edward Bialashewski]

Hi Bill,

I want to rearrange the header section on the progress theme. The current one looks like this: http://wordpressbyd.com/savevernazza/. I would like it to look like this:
http://wordpressbyd.com/screen.jpg. Can you walk me through making the changes? Thanks.

[Bill Robbins]

Good morning Ed.

You can rearrange things like that by placing this snippet in the Custom CSS box that’s in the Styling tab of the Theme Options page or at the bottom of the style.css file:

#tagline h2, 
#tagline p {
	clear: none;
	padding: 0;
	text-align: right;
	margin: 46px 0 10px;
	float: right;
}


header.primary nav {
	float: right;
	clear: both;
	margin-bottom: 10px;
}

See if that doesn’t move things around for you.

Let me know if you need any help,
Bill

[Bill Robbins]

You can spread them out a bit more. You can use this snippet to do that:

.primary nav a, 
.primary nav a:visited {
	margin-left: 2em;
}

This is our only theme that uses % and ems for spacing and sizing so it’s a bit different than how pixels work. You can adjust the 2em to something like 2.2 if you need more space or 1.8 if you want less.

Let me know if I can help,
Bill

[Author]

Posts