Community Forums › Forums › Archived Forums › Design Tips and Tricks › Outreach Pro – Center Logo Image
Tagged: css, header, Outreach Pro, title image
- This topic has 4 replies, 5 voices, and was last updated 8 years, 9 months ago by hannab.
-
AuthorPosts
-
April 5, 2014 at 3:10 pm #98656JessicaLeighParticipant
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.
April 14, 2014 at 10:27 am #100227TomParticipantHi 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 ]August 14, 2014 at 2:10 am #118722Brad DaltonParticipantDoesn'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/
January 25, 2015 at 12:58 pm #138599krystynParticipantSince 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!
June 5, 2015 at 9:54 am #154989hannabMemberStill 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.
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.