[kmmackey]

Hello,

I figured out how to align the logo to the left to line up with the navigation.

.header-image .site-title > a {
background-position: left !important;
background-size: contain !important;
display: block;
height: 80px;
margin: 0 auto; **changed to margin-left: 0;
max-width: 200px;
}

[kmmackey]

Thank you. I have one more question. How can I have the logo aligned left so it it is flush with the left side of the navigation? It is currently on the left side of the header but not flush with the navigation. Really appreciate the help.

KM

[kmmackey]

Thank you Victor. This can be closed.

[kmmackey]

Thanks you just helped me a ton!!

[kmmackey]

Thanks Brad.

[kmmackey]

This reply has been marked as private.

[kmmackey]

Hi,

This may be similar to what I am trying with the lifestyle pro. At my test site - http://www.kathymackeywebservices.com/PGSPN/ - I currently have a full image header. I have another file that I want to add to the header. It is a transparent png that I need to be clickable. The image is in my media library - http://www.kathymackeywebservices.com/PGSPN/wp-content/uploads/2013/12/head2.png
This is currently full width and if it could somehow overlay the first image or if not possible, can I crop the width and put that image into the header right. Maybe I could use your code but I think there are some specifics for the apparition theme that would need to be changed.....Help is appreciated.

Kathy

[kmmackey]

Hi,

I got the header image files in and both images are the same full width of 1068px. The clickable image has a transparent background. Is there any way these images could be stacked on top of each other and be responsive together? The graphic designer thinks that I can use a javascript backstretch to make this happen. The url of the test site is http://www.kathymackeywebservices.com/PGSPN/

Help is appreciated!

[kmmackey]

Hello,

Just want to say a very BIG THANKS to Andrea of Nuts and Bolts for helping with this. The link shown is a test site so if anyone checks this in a few days, it may show something unrelated to this post.

Kathy

[kmmackey]

Hi,

I followed that tutorial and the banner is still not responsive.

http://www.kmtesting.com/

Help is appreciated.

[kmmackey]

Here is the link to my test site - http://www.kmtesting.com/

As mentioned, I am using the lifestyle pro theme. I tried the above and it did not help. Before that I had followed the pixelista tutorial – http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner.

Thanks,
Kathy

[kmmackey]

I am using the lifestyle pro theme and am having the same problem. I tried the above and it did not help. Before that I had followed the pixelista tutorial - http://thepixelista.com/responsive-genesis-child-theme-logo/ but the smallest size has too much space above and below the banner. Here is my testing site - http://thepixelista.com/responsive-genesis-child-theme-logo/.

[kmmackey]

Hi,

I have tried the options and nothing has worked.

I did read this post - See if this helps: http://sridharkatakam.com/add-responsive-header-image-metro-pro/. Tried both options. I currently still have the modifications in my file
.title-area {
width: 100%;
}

.header-image .site-title a {
max-width: none;
min-height: 226px;
}

@media only screen and (max-width: 320px) {
.header-image .site-title a,
.header-image .site-title, .header-image .title-area {
min-height: 0;
}
}

**Height is my header height.

Is there something else I should try? Help is very much appreciated!

[Author]

Posts