Are you a GenerateCustomer?

Do you have an active GP Premium or GenerateBlocks Pro license key?

Create a GenerateSupport account for GeneratePress and GenerateBlocks support in one dedicated place.

Create an account
Already have a GenerateSupport account? Login

Just browsing?

Feel free to browse the forums. Support for our free versions is provided on WordPress.org (GeneratePress, GenerateBlocks).

Want to become a premium user? Learn more below.

Site Logo

  • Hi,

    Is it possible to change the position of the logo image in the header. By default it aligns left of the main title, how do I for example align it to the right of the title or above the title or below it? Or even move it to the far left or the far right of the header on desktop?

    Kind Regards,

    Brian Thompson

  • Hi there,

    it will require a little CSS.
    Can i see the site ? And ill provide the various options

  • Hi David,

    Sorry I took so long to get back to you, The site has only just gone live today.

    Also, I’m wondering how do I change the size of the site title in css

    Kind Regards,

    Brian Thompson

  • Here are the CSS options:

    a. Logo to the right of the site title:

    
    /* logo to the right */
    .site-branding-container {
        flex-direction: row-reverse;
    }
    .site-branding-container .site-logo {
        margin-left: 1em;
    }
    

    b. Logo left-aligned above the site title

    
    /* logo to the top left */
    header .site-branding-container {
        flex-direction: column;
        align-items: flex-start;
    }
    .site-branding-container .site-logo {
        margin-bottom: 1em;
    }
    

    c. centered header with logo above

    
    /* centered header logo above */
    header .inside-header {
        justify-content: center;
    }
    header .site-branding-container {
        flex-direction: column;
    }
    header .site-branding-container .site-logo {
        margin-bottom: 1em;
        margin-right: 0;
    }
    

    d. centered header with logo below

    
    /* centered header logo below */
    header .inside-header {
        justify-content: center;
    }
    header .site-branding-container {
        flex-direction: column-reverse;
    }
    header .site-branding-container .site-logo {
        margin-top: 1em;
        margin-right: 0;
    }
    

    If theres one specifically that you need and want to adjust it for the mobile layout then let me know.

  • Hi David, Sorry for the delay. Thank you so much for providing me with all of the above. I’ve just used C. with for mobile, enclosing it in @media screen.

    Kind Regards,

    Brian Thompson

  • Glad to be of help!

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