Knowledgebase

How to move the site title and tagline within the header in WordPress

If you want to move the site title and tagline to the left, right, center, up or down, you can do this with a couple of modifications. The code that you need to modify is in the style.css file of your theme.

As an example we'll use the code from one of the default themes (Twenty Thirteen) that comes prepackaged with WordPress. The code for styling the site title of that theme looks like this:

.site-title {
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 58px 0 10px;
}

And the code for styling the tagline looks like this:

.site-description {
	font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
	margin: 0;
}

To move the position of any of the two you need to insert into the brackets code that looks like this:

position: relative;
top: -20px;
left: 300px;

So if you want to move the site title the final code would look like this:

.site-title {
	font-size: 60px;
	font-weight: bold;
	line-height: 1;
	margin: 0;
	padding: 58px 0 10px;
	position: relative;
	top: -20px;
	left: 300px;
}

This will actually move the site title closer to the top and more to the right. Putting a hyphen/minus sign in front of a number will move the item in the opposite direction. You can put the same code into the one for styling the tagline. Of course, you can change the numbers, if you want to move the tagline in a position different than the site title:

.site-description {
	font: 300 italic 24px "Source Sans Pro", Helvetica, sans-serif;
	margin: 0;
	position: relative;
	top: 10px;
	left: 250px;
}

Note that the position is set to relative (e.g. position: relative;) which will work better with most themes. With some you might find it easier to set the position of the site title and tagline if you use an absolute position (e.g. position: absolute;)

One very important thing you have to keep in mind is that it's recommended to use a child theme instead of the original theme. In this way you won't lose any code modifications when the theme is updated. You can create the child theme, activate it and then copy and insert the code into the style.css file of the child theme. For more information on child themes check out the tutorial on how to create a child theme in WordPress.

If you use a child theme you don't have to copy into the style.css file of the child theme everything that's related to styling the site title or/and tagline. You only have to put the code for changing the position. Using our example theme and code all we have to put into the style.css file of the child theme in order to change the position of the site title is:

.site-title {
    position: relative;
    top: -20px;
    left: 300px;
}

So what you need is the correct class for the site title (e.g. .site-title), the brackets and inside them the actual code for moving the item. Note that the class (or ID in some themes) for the site title and the tagline is theme-specific. In our example the classes for the site title and the tagline are respectively .site-title and .site-description. In other themes they may be respectively .site-header h1 and .site-header h2 (e.g. theme Twenty Twelve), or #site-title and #site-description, or #titles h1 and #titles h2, or even just h1 and h2. Classes begin with a dot (e.g. .site-title), while IDs are marked with # (e.g. #site-title). Whether classes or IDs are used depends on the theme. But in any case the code that you need to put in the brackets is not different.

If you have troubles finding how the site title and tagline are labeled in the style.css file, one useful thing you can use to find out is the Firebug extension for the Mozilla Firefox web-browser, or the built-in Inspect element function of the Google Chrome web-browser (just click with the right mouse button over an element, select Inspect element from the drop-down menu, and you'll see its CSS code in the bottom right corner).

There are several ways you can edit theme files. You can do that from the Files section of the Pixie control panel. You can use the built-in editor that's in the admin panel (go to Appearance menu<Editor). Another way is to download the file on your local computer with an FTP client, then edit it with a text editor (e.g. Notepad, Wordpad) and upload it back overwriting the old file. Assuming that WordPress is installed directly in the public_html directory on your WordPress hosting account the path to the style.css file on your account will be public_html/wp-content/name-of-theme/style.css.

When it comes to modifying the header in WordPress you may find the following articles useful:

Was this answer helpful?

 Print this Article

Also Read