Black Friday Sale! Get up to $30 off GP Premium! Learn more ➝

[Resolved] How to make a logo appear to the left of the header site text and tagline

Home Forums Support [Resolved] How to make a logo appear to the left of the header site text and tagline

Home Forums Support How to make a logo appear to the left of the header site text and tagline

Viewing 15 posts - 1 through 15 (of 17 total)
  • Author
    Posts
  • #217711
    Uwe Pfeifer

    Hi. How can I make a logo appear to the left of the site tag line and website header title?

    http://teamunity.unityhub.eu

    #217712
    Uwe Pfeifer

    I would like to make the logo adopt to size of the header, but not put it below the header.

    #217723
    Uwe Pfeifer

    Hm, I played around a bit, and i got this:

    .site-branding {
    display: inline-block;
    }

    .site-logo {
    float: left;
    margin-right: 20px;
    height: 128px;
    width: 128px;
    }

    But now the image has a distance from the borders of the header (white part) adn i dont like that. id like to have the logo all over the header in height. is that achievable?

    #217733
    Uwe Pfeifer

    I really love GeneratePress. πŸ˜€

    #217737
    Uwe Pfeifer

    i guess else i gotta put the logo inside a header png and put that one up.

    #217780
    Tom
    Lead Developer
    Lead Developer

    But now the image has a distance from the borders of the header (white part) adn i dont like that. id like to have the logo all over the header in height. is that achievable?

    I’m not too sure what you mean by that.

    Any examples?

    #217791
    Uwe Pfeifer

    I don’t have any examples. what i mean is the top and bottom border of the logo. i think its the padding. can i expand the logo even over the padding without the site title to lose the vertical centering? i mean it should loook like this
    _____________________________________________
    | LOGO
    | LOGO SITE TITLE & SITE TAGLINE
    | LOGO
    ———————————————
    |
    |

    Where as the logo shouldnt need to be only a few pixel big without resizing the header. And I mean LOGO is just 1 Logo not the logo repeated or anything.

    Is this clearer?

    Thank you!

    freaky.

    #217814
    Tom
    Lead Developer
    Lead Developer

    Not sure I’m completely clear..

    You can reduce the padding on top and bottom of the header in “Customize > Layout > Header”.

    Then upload your logo at whatever size.

    To vertically center the site title to the logo, you can do something like this:

    @media (min-width: 769px) {
        .site-branding {
            margin-top: 20px;
        }
    }

    Adjust the 20px as needed.

    #217825
    Uwe Pfeifer

    ok thanks. can i also somehow center the logo between the left navigation bar? so its above the middle of the left navigation bar?

    thanks !!

    #217902
    Tom
    Lead Developer
    Lead Developer

    I’m not sure what you mean? Examples always help πŸ™‚

    #217931
    Uwe Pfeifer

    _____________________

    | <– this centered in the middle above
    _____________________

    | | <– this bar
    | |
    | |
    | |
    | |
    | |

    I tried margin-left: 40px; it looks like its int he middle now though.

    #217934
    Uwe Pfeifer

    oh it doesnt keep spaces. πŸ™ well i dont know if theres any better way than margin-left: 40px of the site-logo css.

    #218011
    Tom
    Lead Developer
    Lead Developer

    I’m afraid I’d actually have to see it on a website to know exactly what you mean.

    If you have any example sites let me know and I should be able to help =)

    #218012
    Uwe Pfeifer
    #218013
    Uwe Pfeifer

    I did this now:

    .site-branding {
    display: inline-block;
    }

    .site-logo {
    float: left;
    margin-right: 20px;
    margin-left: 40px;
    height: 192px;
    width: 192px;
    }


    @media
    (min-width: 769px) {
    .site-branding {
    margin-top: 40px;
    }
    }

Viewing 15 posts - 1 through 15 (of 17 total)
  • You must be logged in to reply to this topic.