Shifting logo in the header over

[kathiemtParticipant Post count: 38]

I’m using the Outreach Theme. I can’t see in the css where the header logo is mentioned so I can shift it over. It’s right over to the left and I want it to line up with the start of the menu navbar.

http://bsbc.org.au/

Any help is greatly appreciated.

[frobnParticipant Post count: 18]

It appears you have the logo image in #header, take it out of #header and put it in the  #title-area

[PinkyMember Post count: 77]

@frobn – If she puts it in #title-area it will have to be put into style.css and I suspect (tho I could be wrong) that by doing so she will lose the responsive nature of the theme.

There was just another question on here relating to the same problem with Outreach theme – I told them to make the header width 1080px – but again it wont be responsive (something i didn’t think about with my answer on that post either).

The image is meant to be in the header. I’ve played with the code and compared it to the demo site – but can’t see where it’s going haywire… sorry Kathie – I so wanted to help another Aussie!

---

cheers

Pinky

[bandjParticipant Post count: 65]

multiple solutions and as far as responsive you can adjust them in the responsive section of the css.

the problem is that your header image is in the #header div which is 100% wide.

there isn’t such a thing as float: center so you need to change that in your .header-image #title-area

You could:

put a width on your #header div.
take your image out of the #header div and put it in the #title area, maybe change the initial width of your title area or add background-size: contain to it. http://www.w3schools.com/cssref/css3_pr_background-size.asp

 

---

web: http://536media.com

[kathiemtParticipant Post count: 38]

All I did was upload the header image in the control panel. I suppose if I add a blank piece to the left of it it will then move it across above the header. I just need to know specific pixel sizes to do it.

I don’t want to play around with coding too much – I’m not a programmer and if I hand this site over to someone else at the church to do things with I don’t want to make the issue complicated. Was just hoping there would be a simple way of getting the logo to show where they wanted it to show.

[PinkyMember Post count: 77]

Kathie can you put the header image back in there for me please, then I’ll give you some code to use

---

cheers

Pinky

[kathiemtParticipant Post count: 38]

Thanks, I tried to put it in the header.png file and upload that but it wasn’t showing up at all.

It’s back up there now. http://www.bsbc.org.au.

Thank you.

[PinkyMember Post count: 77]

Kathie are you comfortable editing your style.css?

---

cheers

Pinky

[PinkyMember Post count: 77]

Kathie if you are happy giving me access to your site i should be able to fix it quick smart for you! I’m in Aust and have nothing better to do with my Sunday afternoon lol

---

cheers

Pinky

[PinkyMember Post count: 77]

alright – lets try this…

on line 183 of your style.css change #header to this:

#header {
background: #090909 url(<a href="http://bsbc.org.au/wp-content/uploads/2013/03/ChurchLogox120jpg.jpg" rel="nofollow">http://bsbc.org.au/wp-content/uploads/2013/03/ChurchLogox120jpg.jpg</a>) top no-repeat;
margin: 0 auto;
height: 120px;
overflow: hidden;
width: 1060px;
}

line 156 change to this:

body {
background-color: #000;
}

then on line 216 change to:

#header .widget-area {
float: right;
width: 420px;
margin-top: -120px;
}

I’d actually recommend installing the plugin My Custom CSS and put all that code in there instead… it will use that code over and above everything else.

---

cheers

Pinky

[kathiemtParticipant Post count: 38]

This reply has been marked as private.

[kathiemtParticipant Post count: 38]

Woo hoo! Thank you, it worked fine Pinky.

[PinkyMember Post count: 77]

Oh sweeeeeet – glad I could help!

---

cheers

Pinky

[SeanParticipant Post count: 1]

Not sure if this will help in your situation but this is the way I put a logo to the left of the header and the text I just added some additional padding to give room for the logo.  I put the code in for the header and title area so you can see the whole code.

#header {
background: #090909 url(images/header.png) center repeat-y;
margin: 0 auto;
min-height: 120px;
overflow: hidden;
width: 100%;
}

#title-area {
float: left;
padding-left: 120px;
overflow: hidden;
width: 430px;
background: url(images/Logo4.png) no-repeat;

}

---

SeanM
Ironclad Tech Services

[Author]

Posts