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

[Resolved] Header Logo Positioning

Home Forums Support Header Logo Positioning

Viewing 15 posts - 1 through 15 (of 23 total)
  • Author
    Posts
  • #16876
    Katherine Scholl

    Hi Tom,

    Thanks for the great theme and all the plugins! I’m new to wordpress. I have activated all of your plugins as well as the custom CSS plugin you recommend, but I still can’t seem to figure out how to change the header and logo positioning.

    If you could please let me know how best to place my logo to the left of the site title (instead of below) and have both the logo and site title left justified and centered vertically on the header.

    Thanks for your help!
    Katie

    #16904
    Tom
    Lead Developer
    Lead Developer

    Hi there,

    To move the image up next to the site title, you can do something like this:

    .site-branding {
          display: inline-block;
    }
    
    .site-logo {
          float: left;
          margin-right: 20px;
    }

    Centering it is kind of tricky, and doing it this way may break things if you’re using a header widget or planning on putting your navigation in the header. If you’re not doing either, you can do this:

    body .inside-header.grid-container {
          display: inline-block;
          margin: 0 auto;
          max-width: 100%;
          width: auto;
          text-align: left;
    }
    
    .site-header {
          text-align:center;
    }

    Hope this helps.

    #16992
    Katherine Scholl

    Thank you for the prompt response. You Rock!

    I added the this code to my custom css plugin:

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

    .site-logo {
    float: left;
    margin-left: 10px;
    }

    body .inside-header.grid-container {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    text-align: left
    }

    .site-header {
    text-align:left;
    }

    However, I still cannot seem to figure out how to vertically center the site-header text relative to the site-logo. I’ve tried a few things, but no luck. Any suggestions?

    #17013
    Tom
    Lead Developer
    Lead Developer

    Can you send me a link so I can see what’s happening? Either in here or to support@generatepress.com?

    Thank!

    #17279
    Katherine Scholl

    Hi Tom,

    Here’s a link

    I’ve played around with the code a little and also the padding in the customizer. Nothing I’ve tried would change the vertical position of the headline relative to the site logo.

    Thanks again for all your help!

    Katie

    #17280
    Katherine Scholl

    Oops, here’s the real link: http://www.klslawoffice.com

    #17281
    Tom
    Lead Developer
    Lead Developer

    Hmm, try going into the Customizer and set the Header to “Center” in the Layout section.

    #17290
    Katherine Scholl

    Center is checked and makes no changes if I uncheck it. It seems like whatever layout options I alter within this part of custom css, nothing changes.

    body .inside-header.grid-container {
    display: inline-block;
    margin: 0 auto;
    max-width: 100%;
    width: auto;
    text-align: left
    }

    #17293
    Tom
    Lead Developer
    Lead Developer

    Hmm – the code is saying it’s not checked.

    In your CSS, find the .site-header {text-align:center} entry and change it to this:

    header.site-header {
          text-align: center;
    }
    #17294
    Katherine Scholl

    Sorry I should have clarified. I changed that because I do want the site-logo and header to be positioned to the left.

    header.site-header {
    text-align: center;
    }

    Only changed the horizontal position instead of the two elements vertically relative to each other, as you will see now.

    If it gets too complicated, no worries. I may be better off hiding the header text and creating an image with the logo and text I want. I suspect it will look better on mobile devices anyway and I would be able to easily position the image relative to any background image I use.

    K

    #17311
    Tom
    Lead Developer
    Lead Developer

    Ah sorry – I was completely misunderstanding.

    To move the site title down so it’s vertically aligned with the logo, you could do this:

    .site-branding {
          margin-top: 30px;
    }
    #17348
    Katherine Scholl

    Got it. Thank you!.

    #17353
    Tom
    Lead Developer
    Lead Developer

    You’re welcome – sorry for the confusion!

    #53211
    siyuanxing9132gmail-com

    Hi tom,

    Could you tell me how to make the tagline below the Logo? Now I hide the site Title.

    Thanks!

    #53294
    Tom
    Lead Developer
    Lead Developer
Viewing 15 posts - 1 through 15 (of 23 total)
  • You must be logged in to reply to this topic.