Outreach Pro – Center Logo Image

[JessicaLeigh]

I've looked through the forum and it looks like most of the people that had asked this question were using the original Outreach theme, not Outreach pro so the fixes I tried weren't working for me.

It seems like there should be a very easy way to cent the logo image in the header yet I haven't been able to make it work.

Any help would be appreciated.

The site is growthinspurts.com but it has a maintenance plugin on right now so you're not able to actually see the design.

[Tom]

Hi Jessica,

You can center the logo (although I don't think you need to 🙂 ) with a few CSS changes. These work well on a wide viewport but will need some work for media queries (as things move around, plus you've got the text site title appearing at one point). Perhaps there are some more elegant approaches using structure changes, but I think this works.

Try these, changes to start with:

/* expand the title area container */
.title-area {
    float: left;
    padding: 14px 0;
    padding: 1.4rem 0;
    width: 1140px;      /* was 340 px */
    position: relative; /* added */
}

/* center the site title (image) */
.site-title a {
    background: url(http://www.growthinspurts.com/wp-content/uploads/2014/04/Home-Header-22.png) no-repeat center !important;
}

/* relocate social icons */
.site-header .widget-area {
    text-align: right;
    width: 150px;       /* was 740px for menus - mod for more icons */
    position: absolute; /* added */
    right: 16%;         /* added - mod for MQ */
    top: 38px;          /* added - mod for MQ */
}

You can also try keeping the social icons at right 3% or so.

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Brad Dalton]

Doesn't look like you got it fixed so try this http://wpsites.net/web-design/how-to-center-your-header-image-or-logo-in-genesis-sample-theme/

---

Tutorials for StudioPress Themes.

[krystyn]

Since this isn't resolved, I thought I would see if there is a better solution? I tried the first step of the one you linked @braddalton and was able to adjust the margins to eyeball the center on a desktop, but for mobile it was a mess!

[hannab]

Still trying to find a solution for this. Please respond to this if anyone knows. I need to center the logo in the header and I need it to work well on mobile devices as well.

To "braddalton" — although I appreciate you responding, you're simply soliciting people to sign up for your site at $47/month in order to get the solution you say you have to offer. I don't think these forums are appropriate for that — provide an answer if you have it or stay off these forums (once you've helped someone, I'm sure it's ok to offer people to sign up). But don't just post "teasers" as they might prevent others from responding with real answers and solutions.

//Hanna

---

If you’re not living on the edge, you’re taking up too much space.

[Author]

Posts