Community Forums › Forums › Archived Forums › Design Tips and Tricks › Use both a custom header image and the site title
- This topic has 9 replies, 3 voices, and was last updated 9 years, 7 months ago by Tony @ AlphaBlossom.
-
AuthorPosts
-
July 15, 2014 at 10:50 am #114407m4cMember
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/July 15, 2014 at 2:03 pm #114426Tony @ AlphaBlossomMemberHi,
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
August 5, 2014 at 8:51 am #117165m4cMemberHi 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
August 5, 2014 at 9:41 am #117168bandjMemberI guess one question would be do you want the blue CNC logo clickable?
August 5, 2014 at 10:22 am #117175Tony @ AlphaBlossomMemberYou 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
August 5, 2014 at 12:38 pm #117188Tony @ AlphaBlossomMemberI 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
August 14, 2014 at 5:12 am #118742m4cMemberHi 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
August 14, 2014 at 5:37 pm #118867Tony @ AlphaBlossomMemberOn 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
August 21, 2014 at 4:03 am #120164m4cMemberExcellent, 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
August 21, 2014 at 10:20 pm #120395Tony @ AlphaBlossomMemberJason,
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
-
AuthorPosts
- The topic ‘Use both a custom header image and the site title’ is closed to new replies.