Use both a custom header image and the site title

[m4c]

Hi,

I'm using the Enterprise theme. I've can't believe someone hasn't asked this, if they have can you just direct me to their answer..

I want to have both a Custom header image and the site title in the header. Normally, using one switches off the other. I've been messing with the stylesheet all day and although I can get it close, by changing text-idents etc. I still need the header to be mobile responsive.

Site is http://217.199.187.60/thecashflowconsultancy.com/

The blue CFC is a custom image and the site title, well, is the site title.

Help!

http://217.199.187.60/thecashflowconsultancy.com/

[Tony @ AlphaBlossom]

Hi,

I'm not sure I understand your question because you have the header image and site title. Are you having trouble just with the responsive part?

If so, not sure what end result you want, but maybe this will get you going in the right direction. I would change the ".header-image .site-title > a" position to "center top".

Then you can add padding-top so your site title sits below your image:

.header-image .site-title > a {
    background-position: left top !important; /* possibly 'center top' for responsive */
    float: left;
    min-height: 80px;
    padding-top: 80px;
    width: 100%;
}

You can get rid of the text-indent and use align, padding etc. Add these inside your media query if you want this only for certain screen sizes.

Hope I understood correctly, but if not please clarify.

Take care,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[m4c]

Hi Tony,

Thanks so much I'm really close now.

Got a slight issue with the spacing between the site-title and site-description at the top media sizes, I've been trying to find any padding issues but can't find it...any thoughts.

Very grateful

Jason

http://217.199.187.60/thecashflowconsultancy.com/

[bandj]

I guess one question would be do you want the blue CNC logo clickable?

[Tony @ AlphaBlossom]

You can try adding these to your .site-description rules:

float: left;
margin-top: -10px;

Change the "-10px;" to whatever number you need to position the site title. You can also add "padding-top: 10px;" to your .header-image .site-title > a rules if you need to adjust that.

I think that's what you're after, but if not let us know.

Glad to be of help!

Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Tony @ AlphaBlossom]

I see you got this working! One more thought...if you want the entire area (including description) to be clickable, you can add this to your .header-image .site-title > a rule:

position: relative;
z-index: 10;

Not sure if it's a big deal, but seems better that way.

Have a good one!

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[m4c]

Hi Tony,

I've got it working well just one quick thing, when you hover over the logo at @768px it hops the site title down a bit...but it doesn't at @500px? or maybe it's at @500px;...any way you'll see what I mean.

Any thoughts, looks like a padding is being reverted....

Jason

[Tony @ AlphaBlossom]

On your media queries (around line 2065) you have this:

@media only screen and (max-width: 768px) {
.site-title {
    font-size: 30px;
    line-height: 1;
}
.site-title a, .site-title a:hover {
    padding-left: 0;
    padding-top: 100px;
}
.site-description {
    padding-left: 0;
    padding-top: 30px;
}
@media only screen and (max-width: 500px) {
.header-image .site-title > a {
    background-position: center top !important;
    min-height: 80px;
    padding-top: 80px;
    width: 100%;
}
site-title a:hover {
    padding-left: 0;
    padding-top: 100px;
}
}
@media only screen and (max-width: 270px) {
}
}

.site-title a:hover has padding-top: 100px listed twice, 768 and 500. Remove that for both and it will take care of the 'jump'. Also, you're missing the closing bracket { for the 768 query, and there's an extra one after the 270px query, fyi.

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[m4c]

Excellent, all done and works really well.

Tony, can't thank you enough!

It's also good that the forum now has the solutions for others. Going forward I am probably going to use this functionality on more of my sites, might be good for SEO etc. than just using images.

Cheers,

Jason

[Tony @ AlphaBlossom]

Jason,

Glad to hear it's all setup the way you want!

Have a great night,
Tony

---

Tony Eppright | http://www.AlphaBlossom.com | Follow me on twitter @_alphablossom

[Author]

Posts