Shifting logo in the header over

[kathiemt]

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.

---

Kathie Thomas

[frobn]

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

[Pinky]

@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

[bandj]

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

 

[kathiemt]

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.

---

Kathie Thomas

[Pinky]

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

---

cheers

Pinky

[kathiemt]

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.

---

Kathie Thomas

[Pinky]

Kathie are you comfortable editing your style.css?

---

cheers

Pinky

[Pinky]

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

[Pinky]

alright - lets try this...

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

#header {
background: #090909 url(http://bsbc.org.au/wp-content/uploads/2013/03/ChurchLogox120jpg.jpg) 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

[kathiemt]

This reply has been marked as private.

[kathiemt]

Woo hoo! Thank you, it worked fine Pinky.

---

Kathie Thomas

[Pinky]

Oh sweeeeeet - glad I could help!

---

cheers

Pinky

[Sean]

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

[sam33joy]

can you help me how can I add the logo outreach theme? what step I need follow

sam33joy

http://www.visioniglesia.com

[Author]

Posts