Use both a custom header image and the site title

Community Forums Forums Design Tips and Tricks Use both a custom header image and the site title

This topic is: resolved

This topic contains 9 replies, has 3 voices, and was last updated by  Tony @ AlphaBlossom 2 months ago.

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    Posts
  • #114407

    m4c
    Participant
    Post count: 5

    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/
    #114426

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    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


    #117165

    m4c
    Participant
    Post count: 5

    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/

    #117168

    bandj
    Participant
    Post count: 184

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


    #117175

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    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


    #117188

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    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!


    #118742

    m4c
    Participant
    Post count: 5

    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

    • This reply was modified 2 months, 1 week ago by  m4c.
    • This reply was modified 2 months, 1 week ago by  m4c.
    #118867

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    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.


    #120164

    m4c
    Participant
    Post count: 5

    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

    #120395

    Tony @ AlphaBlossom
    Participant
    Post count: 543

    Jason,

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

    Have a great night,
    Tony


Viewing 10 posts - 1 through 10 (of 10 total)

The topic ‘Use both a custom header image and the site title’ is closed to new replies.