CODEWITHSUNDEEP
csswordpresstextheaderalignment
Kimberley Furson
Kimberley Furson

Reputation: 495

How to position the site title and tagline on the upper right of the header?

I'm using Wordpress and their twentythirteen theme. With this theme I would like to position and align the site title and tagline text to the upper right of the header. When I try to do so it's always positioned under my logo for some reason. I played with the position CSS property with no luck, it's still positioned under the logo.

Sample of the CSS file

.site-title {
    font-size: 30px;
    line-height: 0.5;
    padding: 5px 0 10px;
    text-align:right;
    position: relative;
}

.site-description {
    font: 300 italic 18px "Source Sans Pro", Helvetica, sans-serif;
    text-align:right;
}

.site-header {
    margin:10px auto 0 auto;
    max-width:980px;
    padding:0;
    background-color:#ffffff;
    background-size: 980px auto;
    border-top:2px solid #efefef;
    border-bottom:1px solid #cdcdcd;
    box-shadow: 0 3px 3px #dedede;
    -moz-box-shadow: 0 3px 3px #dedede;
    -webkit-box-shadow: 0 3px 3px #dedede;
    -o-box-shadow: 0 3px 3px #dedede;
}

.site-header .site-title:hover {
    text-decoration: none;
}

.site-header .home-link {
    min-height: 50px;
}

.header-logo {
    max-width:60%;
    display:block;
    padding-top:3px;
    position:relative;
}

Here's my testing website so you can see exactly what I'm talking about: mywptestsite.is-great.org

What am I missing here? Thanks in advance, Kim

Upvotes: 2

Views: 10255

Answers (3)

Trunker
Trunker

Reputation: 70

The problem is that you are encapsulating your site title in an h1 tag, so it is positioning it in a new line.

You could fix the issue by putting both your logo and your site title in the same <div> element, and add float: left; to your header-logo class, and float: right; to your site-title class.

Upvotes: 1

tiny sauce
tiny sauce

Reputation: 146

You can use float on the image, title, and description to get those two elements onto the right. You will also need to use a clearfix technique on .home-link to get the element to wrap around all floated elements.

CSS

.header-logo { float: left; }
.site-title{ float: right; clear: none; }
.site-description { clear: right; }

Upvotes: 1

sinisake
sinisake

Reputation: 11338

You can try this - add these few lines to title and tagline css classes:

.site-title {
    position:absolute;
    top:20px;
    right:20px;

        }
.site-description {
position:absolute;
top:50px;
right:110px;
}

You can change top and right values to get desired positions of course...

Upvotes: 1

Related Questions